. Advertisement .
..3..
. Advertisement .
..4..
The Document interface can help you set the value of a select element using JavaScript through its built-in methods. Learn more about them below.
Set The Value Of A Select Element Using JavaScript
We will use the following Select element as an example for this tutorial:
<body>
<label>Choose a website:</label>
<select name="sites" id="site-selector">
<option value="">--Please choose a site--</option>
<option value="ittutoria">ITTutoria</option>
<option value="reddit">Reddit</option>
<option value="stack_overflow">Stack Overflow</option>
<option value="quora">Quora</option>
<option value="github">Github</option>
</select>
<button id="changeSite">Change Site!</button>
</body>
This is what the element and the button look like in a web browser. We will use this button to change the value of the select dropdown box.
......... ADVERTISEMENT .........
..8..
Change To The Option’s Value
You can use this JavaScript code to switch to the Selection element to an option of your choice (in this case, it will be the ITTutoria option):
const change = document.getElementById('changeSite')
const selectbox = document.getElementById('site-selector')
change.addEventListener('click', () => {
selectbox.value = 'ittutoria'
})
After clicking the button, you can notice the dropdown list has a new label “ITTutoria”.
......... ADVERTISEMENT .........
..8..
This solution requires you to use the Document.getElementById() to pick the right element you want to modify from JavaScript. The returned Element object represents the HTML element that has the id property matching your search.
As you may already know, IDs in HTML have to be unique. This is why Document.getElementById() is a great choice to get the exact element you want. For each ID that exists in the HTML document, JavaScript will always return a DOM element matching it.
Its syntax:
getElementById(id)Remember that IDs of HTML elements are case-sensitive. If no element with such an ID exists, Document.getElementById() will return null.
If you don’t have the ID of the element you want to access, you can rely on the Document.querySelector() method instead. It can find HTML elements in the document for you by using CSS selectors.
Syntax:
querySelector(selectors)The method will return the first Element object that matches your provided selector. You can also specify multiple selectors in one method call. If it finds no matches, the Document.querySelector() method returns null.
This is how you can replace Document.getElementById() with Document.querySelector() in the above example:
const change = document.querySelector('#changeSite')
const selectbox = document.querySelector('#site-selector')
change.addEventListener('click', () => {
selectbox.value = 'ittutoria'
})
Note: you can also create an element with an ID with JavaScript. Check out this guide to learn how.
When you have set an id attribute to the <option> element, you can also get its value with the getElementById() method:
const change = document.getElementById('changeSite')
const selectbox = document.getElementById('site-selector')
change.addEventListener('click', () => {
selectbox.value = document.getElementById('ittutoria').value
})
Change To The Option’s Text Value
In addition to the value attribute, you can also select the option by specifying its text value directly:
const change = document.getElementById('changeSite')
const selectbox = document.getElementById('site-selector')
const $options = Array.from(selectbox.options);
change.addEventListener('click', () => {
const text = 'ITTutoria';
const optionToSelect = $options.find(item => item.text ===text);
optionToSelect.selected = true;
})
This version Document.querySelector() uses instead of Document.getElementById():
const change = document.querySelector('#changeSite')
const selectbox = document.querySelector('#site-selector')
const $options = Array.from(selectbox.options);
Summary
You can set the value of a select element using JavaScript with Document.getElementById() or Document.querySelector(). It can help you choose the <select> element and set it to the <option> element using its value or text property.
Leave a comment