How to Programmatically Select an Option using JavaScript?

A select dropdown is commonly used inside forms that allows users to select an option from a predefined set of options.

But in some cases, we need to select the option from the dropdown dynamically based on some condition. For example, the user is on the edit page and you want to prepopulate the select dropdown with the option that the user previously selected.

In JavaScript, there are different ways to select an option programmatically. Let’s discuss each method one by one.

1. Using the value Property of the Dropdown

The simplest way to select an option from a dropdown in JavaScript is to use the value property of the dropdown element.

In this method, you have to simply set the value property of the dropdown to the value of the option that you want to make auto-selected.

Let me show you this with an example.

Let’s say we have the following select dropdown in our HTML file with some id=”myDropdown”. We also have a button which we will use to change the select option dynamically.

<div>
    <select id="myDropdown">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
    </select>
    
    <button id="myBtn">Change</button>
</div>

We want to make the third option selected using JavaScript.

For that, we will set the value property of the dropdown to the value of the third option:

let dropDown = document.getElementById('myDropdown');
let button = document.getElementById('myBtn');

// Fires on button click
button.addEventListener('click', function(event){
    
    // Make third option selected
    dropDown.value = 'option3'; 

});

After running the above code, you will get the following output:

As you can see from the above output, as soon as we click the ‘change’ button, it makes the third option of the dropdown selected.

2. Using the selected Attribute of the Dropdown

You can also use the selected attribute of the dropdown to make an option selected dynamically.

The selected attribute specifies which option of the dropdown should be pre-selected. By default, this attribute is added to the first option, therefore, it remains selected initially.

So, if we want to make any dropdown option selected, we can add the selected="selected" attribute to it.

See the following example(considering the first example’s HTML code):

let dropDown = document.getElementById('myDropdown');
let button = document.getElementById('myBtn');

// Fires on button click
button.addEventListener('click', function(event){
    
    // Make third option selected
    dropDown.options[2].selected = "selected";

});

3. Using the selectedIndex Property

The selectedIndex property represents the index of the currently selected option. By default, this property is set to 0, which represents that the first option will be selected initially.

So, if you want to select an option dynamically, you can set the selectedIndex property to the index of the option in the dropdown. Remember that the index starts at 0.

To make the third option selected, you can simply set the selectedIndex to 2:

let dropDown = document.getElementById('myDropdown');
let button = document.getElementById('myBtn');

// Fires on button click
button.addEventListener('click', function(event){
    
    // Make third option selected
    dropDown.selectedIndex = 2;

});

Conclusion

In this article, we learned different ways to make an option selected using JavaScript.

There are actually 3 common ways that you can use to make an option selected using JavaScript. First, using the value property, second, using the selected attribute, and third, using the selectedIndex property of the dropdown.

Based on the data you have, you can choose any of the three methods to make the option selected.

Thanks for reading.