Changing a select element option using JavaScript.

This is a short JavaScript tutorial on how to change the selected option of a select HTML element. In this post, I will show you how to do it with and without JQuery.

Changing a select option without JQuery.

In this example, I am going to use vanilla JavaScript. Although the JQuery library is great, you may find yourself in situations where you don’t have access to it. It’s also not a terrific idea to include an entire library just for the sake of changing a select element.

Take a look at the custom JavaScript function that I wrote:

//Custom function that changes a select element's option.
function select(selectId, optionValToSelect){
    //Get the select element by it's unique ID.
    var selectElement = document.getElementById(selectId);
    //Get the options.
    var selectOptions = selectElement.options;
    //Loop through these options using a for loop.
    for (var opt, j = 0; opt = selectOptions[j]; j++) {
        //If the option of value is equal to the option we want to select.
        if (opt.value == optionValToSelect) {
            //Select the option and break out of the for loop.
            selectElement.selectedIndex = j;
            break;
        }
    }
}

The JavaScript function above takes in two parameters. The unique ID of our select element and the value that we want to select. Inside our function, we loop through each option in the select element. If the value of the option matches the value that we want to select, we change the selectedIndex of the element and break out of the for loop.

An example of this function being used with a dropdown containing a list of country names:

<select id="countries" name="countries">
    <option value="Argentina">Argentina</option>
    <option value="Brazil">Brazil</option>
    <option value="England">England</option>
    <option value="Ireland">Ireland</option>
    <option value="United States">United States</option>
</select>

<script>
select('countries', 'Ireland');
</script>

In the example above, I used our custom function to select Ireland.

Changing a select option using JQuery.

If you’re already using the JavaScript JQuery library, then you can do something like this:

//We want to select Ireland.
var optionToSelect = 'Ireland';
//Change the #countries select element to the Ireland option.
$('#countries option:contains(' + optionToSelect + ')').attr('selected', 'selected');

In the JQuery code above, we changed our select element option to “Ireland” using the attr method. However, you can also use the prop method:

var optionToSelect = 'Ireland';
$('#countries option:contains(' + optionToSelect + ')').prop({selected: true});

In some cases, your value attributes might differ from the text of each option.

An example:

<select id="countries" name="countries">
    <option value="0">Argentina</option>
    <option value="1">Brazil</option>
    <option value="2">England</option>
    <option value="3">Ireland</option>
    <option value="4">United States</option>
</select>

This is a common when you are dealing with select elements that were populated from a database or an array. In this scenario, you can use the following JQuery snippet:

//Ireland is 3 in our select element.
var valueToSelect = 3;
$('#countries').val(valueToSelect);

In the code above, we changed our select element by using the val method. We set it to 3 because the Ireland option in our list has a value attribute of 3.

And that’s it! Hopefully, the above examples solved your problem!