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.

 <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>

Set default value using index number.

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

   <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>

1. Create a select element with four options and an id named element .
2. document.getElementById("element") returns a NodeList with the options.
3. The index of the NodeList starts from 0

Set default value of select element using setAttribute method.

 <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>

Conclusion

In this article, I have shared three ways to set the default selected value in a dropdown using JavaScript.