Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to preselect Dropdown Using JavaScript Programmatically?

Javascript Web Development Front End Scripts

In this tutorial, we will learn how to preselect dropdown options using JavaScript programmatically. This is useful when you want to set default selections based on user preferences, data from APIs, or other dynamic conditions.

A dropdown list is a toggle menu that allows users to select one option from multiple choices. In HTML, dropdown lists are created using the <select> element combined with <option> elements. JavaScript provides several methods to programmatically control these selections.

There are two primary methods to preselect dropdown options: using the selectedIndex property and using the value property. Let's explore both approaches.

Using the selectedIndex Property

The selectedIndex property allows you to specify or return the index of the selected option from a dropdown list. The index starts from 0 for the first option.

If no option is selected, selectedIndex returns -1. Setting it to -1 deselects all options.

Syntax

document.getElementById("dropdown_id").selectedIndex = index_number;

Example

In this example, we create two dropdown lists for music genres and artists. The first dropdown preselects "Indie" (index 2), and the second preselects "Imagine Dragons" (index 1).

<html>
<body>
   <h4>Preselect dropdown list using <i>selectedIndex property</i> in JavaScript</h4>
   
   <p>Select type of music from the first dropdown list:</p>
   <form id="myForm1">
      <select id="dropdown1" name="dropdown1" class="form-control">
         <option value="Pop">Pop</option>
         <option value="Rock">Rock</option>
         <option value="Indie">Indie</option>
         <option value="Classical">Classical</option>
         <option value="Metal">Metal</option>
      </select>
   </form>
   
   <p>Select the artist from the second dropdown list:</p>
   <form id="myForm2">
      <select id="dropdown2" name="dropdown2" class="form-control">
         <option value="Taylor Swift">Taylor Swift</option>
         <option value="Imagine Dragons">Imagine Dragons</option>
         <option value="The Local Train">The Local Train</option>
         <option value="Ravi Shankar">Ravi Shankar</option>
         <option value="Judas Priest">Judas Priest</option>
      </select>
   </form>
   
   <script>
      // Preselect "Indie" (index 2) from first dropdown
      document.getElementById("dropdown1").selectedIndex = 2;
      
      // Preselect "Imagine Dragons" (index 1) from second dropdown
      document.getElementById("dropdown2").selectedIndex = 1;
   </script>
</body>
</html>

Using the value Property

The value property allows you to set the selected option by specifying its value attribute directly. This method is more readable when you know the exact value you want to select.

Syntax

var dropdown = document.getElementById("dropdown_id");
dropdown.value = "option_value";

Example

In this example, we create dropdown lists for Olympic sports and athletes. We preselect "Gymnastics" from the first dropdown and "Saikhom Mirabai Chanu" from the second dropdown using their values.

<html>
<body>
   <h3>Preselect dropdown list using <i>value property</i> in JavaScript</h3>
   
   <p>Select type of Olympic sport from the first dropdown list:</p>
   <form id="myForm1">
      <select id="dropdown1" name="dropdown1" class="form-control">
         <option value="Swimming">Swimming</option>
         <option value="Archery">Archery</option>
         <option value="Fencing">Fencing</option>
         <option value="Gymnastics">Gymnastics</option>
         <option value="Weightlifting">Weightlifting</option>
      </select>
   </form>
   
   <p>Select the player from the second dropdown list:</p>
   <form id="myForm2">
      <select id="dropdown2" name="dropdown2" class="form-control">
         <option value="Michael Phelps">Michael Phelps</option>
         <option value="Deepika Kumari">Deepika Kumari</option>
         <option value="Bhavana Devi">Bhavana Devi</option>
         <option value="Simone Biles">Simone Biles</option>
         <option value="Saikhom Mirabai Chanu">Saikhom Mirabai Chanu</option>
      </select>
   </form>
   
   <script>
      // Preselect using value property
      var drop1 = document.getElementById("dropdown1");
      drop1.value = "Gymnastics";
      
      var drop2 = document.getElementById("dropdown2");
      drop2.value = "Saikhom Mirabai Chanu";
   </script>
</body>
</html>

Comparison

Method Usage Best When
selectedIndex Uses numeric index (0-based) You know the position of the option
value Uses the option's value attribute You know the exact value to select

Key Points

  • Use selectedIndex when working with position-based selection
  • Use value property when you have the exact option value
  • Both methods work immediately and don't require user interaction
  • Setting selectedIndex to -1 deselects all options

Conclusion

Both selectedIndex and value properties provide effective ways to preselect dropdown options programmatically. Choose selectedIndex for position-based selection and value for value-based selection based on your specific requirements.

Updated on: 2026-03-15T23:18:59+05:30

2K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements