How to set default selected value in dropdown using javascript

Hello readers, in this article, I'm going to explain how to set default selected value in dropdown using javascript. Basically, I will share some methods by using them you can easily set default value in select option dynamically.

Set default value in HTML select element using value property.

Yeah! we can set a default value of a select element using value property. The example is given below.

set default value for select element using value property
   <select id="element">
     <option>option 1</option>
     <option>option 2</option>
     <option>option 3</option>
     <option>option 4</option>
   </select>
   <script>
    document.querySelector('#element').value = "option 2";
   </script>
  
Try it Yourself »

Set default value using index number.

We can also set the default value for select element using the index number of the options.

set default value for select element using index number
   <select id="element">
     <option>option 1</option>
     <option>option 2</option>
     <option>option 3</option>
     <option>option 4</option>
   </select>
   <script>
    document.getElementById("element").selectedIndex = 2;
   </script>
  
Try it Yourself »

Set default value of select element using setAttribute method.

set default value for select element
   <select id="element">
     <option>option 1</option>
     <option>option 2</option>
     <option>option 3</option>
     <option>option 4</option>
   </select>
   <script>
    document.getElementById("element")[1].setAttribute('selected','selected');
   </script>
  
Try it Yourself »