Set the Value of a Select Element using JavaScript

avatar

Borislav Hadzhiev

Thu Dec 30 20212 min read

banner

Photo by Vince Gx

Set the Value of a Select Element using JavaScript #

Use the value property to set the value of a select element, e.g. select.value = 'apple'. The value property can be used to set or update the value of a select element. To remove the selection, set the value to an empty string.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <select name="fruits" id="fruit-select"> <option value="">--Choose an option--</option> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="kiwi">Kiwi</option> </select> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const select = document.getElementById('fruit-select'); // โœ… set select value select.value = 'apple'; console.log(select.value); // ๐Ÿ‘‰๏ธ "apple" // โœ… unset select value // select.value = ''; const allOptions = Array.from(select.options).map(option => option.value); console.log(allOptions); // ๐Ÿ‘‰๏ธ ['', 'apple', 'banana', 'kiwi']

We used the value property to set the value of a select element.

A convention for when you don't have a default value is to have the value of the first option element be an empty string.

To remove the selection, you can set the value property on the select element to an empty string.

index.js
const select = document.getElementById('fruit-select'); // โœ… set select value select.value = 'apple'; console.log(select.value); // ๐Ÿ‘‰๏ธ "apple" // โœ… unset select value select.value = '';

If you need an array of the values of all of the option elements, you can use the map() method to iterate over the elements and return the value of each option.

index.js
const select = document.getElementById('fruit-select'); // โœ… set select value select.value = 'apple'; console.log(select.value); // ๐Ÿ‘‰๏ธ "apple" const allOptions = Array.from(select.options).map(option => option.value); console.log(allOptions); // ๐Ÿ‘‰๏ธ ['', 'apple', 'banana', 'kiwi']

The value of a select element can be changed in the same way it is set, just update the value property.

index.js
const select = document.getElementById('fruit-select'); select.value = 'apple'; console.log(select.value); // ๐Ÿ‘‰๏ธ "apple" select.value = 'banana'; console.log(select.value); // ๐Ÿ‘‰๏ธ "banana"
If you set a select element's value to a value that is not present among theoption elements, the value of the select element gets reset.
index.js
const select = document.getElementById('fruit-select'); select.value = 'does-not-exist'; console.log(select.value); // ๐Ÿ‘‰๏ธ ""

To avoid misspelling values, you can create an object, which you use to access the values of the option elements.

index.js
const select = document.getElementById('fruit-select'); const values = { apple: 'apple', banana: 'banana', kiwi: 'kiwi', }; select.value = values.apple; console.log(select.value); // ๐Ÿ‘‰๏ธ "apple" select.value = values.banana; console.log(select.value); // ๐Ÿ‘‰๏ธ "banana"
This is a much better solution than hard coding strings all over the place, because it leverages your IDE's autocompletion.

It also helps the readers of your code know what the alternative values of the select element are.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee