This post will discuss how to set the value of a dropdown list in JavaScript and jQuery.
1. Using jQuery
The jQuery’s .val() method allows setting the value of a dropdown.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { $("#pets").val('parrot'); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<label for="pets">Choose your pets:</label> <select name="pets" id="pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="rabbit">Rabbit</option> <option value="parrot">Parrot</option> <option value="guinea_pig">Guinea Pig</option> </select> <button id="submit">Change Value</button> |
Note that .val() does not fire the change event. To trigger the change event, you can call the .change() or .trigger("change") method after setting the value.
Alternatively, you can use the .prop() method to set the selectedIndex property which reflects the index of the selected <option> element.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { $("#pets").prop("selectedIndex", 3); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<label for="pets">Choose your pets:</label> <select name="pets" id="pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="rabbit">Rabbit</option> <option value="parrot">Parrot</option> <option value="guinea_pig">Guinea Pig</option> </select> <button id="submit">Change Value</button> |
The selectedIndex property takes an index of the value to be set. If the index is not known in advance or you don’t want to depend on the index, you can do like:
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { $("#pets option[value='parrot']").prop('selected', true); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<label for="pets">Choose your pets:</label> <select name="pets" id="pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="rabbit">Rabbit</option> <option value="parrot">Parrot</option> <option value="guinea_pig">Guinea Pig</option> </select> <button id="submit">Change Value</button> |
2. Using JavaScript
In pure JavaScript, you can use the selectedIndex property which reflects the index of the selected <option> element.
JS
|
1 2 3 |
document.getElementById('submit').onclick = function() { document.getElementById("pets").selectedIndex = 3; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<label for="pets">Choose your pets:</label> <select name="pets" id="pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="rabbit">Rabbit</option> <option value="parrot">Parrot</option> <option value="guinea_pig">Guinea Pig</option> </select> <button id="submit">Change Value</button> |
Alternatively, you can loop through each <option> and set the desired value:
JS
|
1 2 3 4 5 6 7 8 9 10 |
document.getElementById('submit').onclick = function() { for (var option of document.getElementById("pets").options) { if (option.value === 'parrot') { option.selected = true; return; } } } |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<label for="pets">Choose your pets:</label> <select name="pets" id="pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="rabbit">Rabbit</option> <option value="parrot">Parrot</option> <option value="guinea_pig">Guinea Pig</option> </select> <button id="submit">Change Value</button> |
That’s all about setting the value of a drop-down list in JavaScript and jQuery.