How to preselect Dropdown Using JavaScript Programmatically?

In this tutorial, we will learn how to preselect Dropdown using JavaScript Programmatically.

A dropdown list is a toggle menu that allows the user to select one of several options. The options in this list are defined here in coding and are linked to a unique function. When you click or choose this option, that function is triggered and begins to work. A dropdown list allows us to select only one item from a list of options.

To construct a basic dropdown list in HTML, the <select> tab is combined with the, <option> tab. Following that, JavaScript assists in performing operations on this list. Aside from that, you may make the dropdown list using the container tab <div>.

Insert the dropdown items and links within it. To open the dropdown menu, you may use any element such as a <button>, an < a>, or a <p> tag.

Following are the methods used to learn how to preselect a dropdown list using JavaScript.

Using the selectedIndex Property

The selectedIndex property of the select element allows you to specify or return the chosen option index from the dropdown list. The index value begins at zero.

If you pick several items from the dropdown list, the index will be returned as the first element in the list. If the dropdown list enables multiple options, the index of the first item picked will be returned. The number "-1" deactivates all options (if any).

If no options are chosen, the selectedIndex property returns -1. First, we'll add a select element to the HTML. We will assign a dropdown id to this select element.

Syntax

document.getElementById("dropdown_menu").selectedIndex = "2";

The dropdown list's ID is fetched using the getElementById() method, and that list's index is selected to the third index using the selectedIndex property.

Example

In this example mentioned below, we have created two dropdown lists using the <form> element in HTML. The first dropdown list shows the type of music to select and gives the options of Pop, Rock, Indie, Classical, and Metal.

The second dropdown list shows the respective artists to select, like Taylor Swift, Imagine Dragons, The Local Train, Judas Priest, and Ravi Shankar.

The selectedIndex property preselects the 2nd index from the first dropdown list, Indie, as shown in the output. From the second dropdown list, the 1st index is preselected, which is Imagine Dragons, as seen in the output. The index value starts from 0.

<html>
<body>
   <h4>Preselect dropdown list using <i>selectedIndex property</i> in
   JavaScript</h4>
   <p id="root">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 id="root">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>
      document.getElementById("dropdown1").selectedIndex = "2";
      document.getElementById("dropdown2").selectedIndex = "1";
   </script>
</body>
</html>

Using the value Property

The value property specifies the default value shown in the element when the page is loaded. This attribute is present in form controls and a few other HTML components.

For certain controls, the value attribute in HTML and the value property in JavaScript behave differently.

The value attribute can be used to specify the initial value; however, the value property contains the actual value of the control. In JavaScript, use the default Value property to acquire or set the initial value.

Syntax

var drop1 = document.getElementById("dropdown_menu");
drop1.value = "Gymnastics";

The dropdown list’s ID is fetched using the getElementById() method. That is saved to the drop1 variable. That dropdown list's index with a "Gymnastics" value is selected using the value property.

Example

In this example, we used the HTML <form> element to construct two dropdown lists. The first dropdown list allows you to choose between swimming, archery, fencing, gymnastics, and weightlifting as Olympic sports. The second dropdown list displays the corresponding field players, such as Michael Phelps, Deepika Kumari, Bhavana Devi, Simone Biles, and Saikhom Mirabai Chanu.

The variable drop1 fetches the element id of the first dropdown list and stores its value. The drop1 value is then set to "Gymnastics" to preselect that value using the value attribute. Similarly, the variable drop2 retrieves and saves the element id of the second dropdown list. Using the value property, the drop2 element is then set to "Saikhom Mirabai Chanu."

<html>
<body>
   <h3>Preselect dropdown list using <i>value property</i> in
   JavaScript</h3>
   <p id = "root">Select type of olympic sport from the first dropdown
   list:</p>
   <form id = "myForm1">
      <select id = "dropdown1" name = "dropdown1" class = "formcontrol">
         <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 id = "root">Select the player from the second dropdown list:</p>
   <form id = "myForm2">
      <select id = "dropdown2" name = "dropdown2" class = "formcontrol">
         <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>
      var drop1 = document.getElementById("dropdown1");
      drop1.value = "Gymnastics";
      var drop2 = document.getElementById("dropdown2");
      drop2.value = "Saikhom Mirabai Chanu";
   </script>
</body>
</html>

In this tutorial, we are learning how to preselect Dropdown using JavaScript Programmatically using two methods, i.e., one using the selectedIndex property and the second using the value property. Both methods work effectively, and you can easily make the dropdown's value preselected.

Updated on: 15-Sep-2022

1K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements