How to select dropdown item based on value

Last updated 4 years, 9 months ago | 1749 views 75     5

JQuery | Select dropdown item based on the value

Change the selected option by value on the select box with jQuery is common nowadays. So let us have a select element with the list of the fruits, and we need to "select" one of its options based on one of its values. What we do is just use the “selected” selector of jQuery

 

Let’s say we have the following select element and we need to dynamically select the option with a value of "CS", which would be the Cherries.

<select id="mySelect">
<option value="">Please Select</option>
<option value="AS">Apples</option>
<option value="BS">Blueberries</option>
<option value="CS">Cherries</option>
<option value="DS">Dewberries</option>
<option value="ES">Eggfruits</option>
</select>

Now below script select "Cherries" in select dropdown

<script>
$("#myselect option[value='CS']").attr('selected', 'selected');
    
// Or just use...

$("#myselect").val('CS');
</script>

The complete code will...

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $("#myselect option[value='CS']").attr('selected', 'selected');
    
        // Or just use...

        $("#myselect").val('CS');
    </script>
    </head>
    <body>
        <select id="mySelect">
        <option value="">Please Select</option>
        <option value="AS">Apples</option>
        <option value="BS">Blueberries</option>
        <option value="CS">Cherries</option>
        <option value="DS">Dewberries</option>
        <option value="ES">Eggfruits</option>
        </select>
    </body>
</html>