Getting the value of a select in HTML is a fairly recurring question. Learn how to return the value and text of a dropdown list using pure JavaScript or jQuery.
Let's assume you have the following code:
<select id="language">
<option value="en" selected>English</option>
<option value="es">Español</option>
<option value="pt">Português</option>
</select>
There are two pieces of information we may wanna get in this case.
- The value of the selected option.
- The text of the selected option.
How to get the value of a select
To get the value of a select or dropdown in HTML using pure JavaScript, first we get the select tag, in this case by id, and then we get the selected value through the selectedIndex property.
var select = document.getElementById('language');
var value = select.options[select.selectedIndex].value;
console.log(value); // en
The value "en" will be printed on the console (Ctrl + Shift + J to open the console).
Getting the value of a select with jQuery
$('#language').val(); // en
How to get the text of a select
To get the content of an option, but not the value, the code is almost the same, just take the text property instead of value.
var select = document.getElementById('language');
var text = select.options[select.selectedIndex].text;
console.log(text); // English
The text "English" will be printed on the console (Ctrl + Shift + J to open the console).
Getting the text from a select with jQuery
$('#language :selected').text(); // English
Complete example
In the code below, when we change the dropdown value, the select value and text are shown in an input field.
<!DOCTYPE html>
<html>
<body>
<select id="language" onChange="update()">
<option value="en">English</option>
<option value="es">Español</option>
<option value="pt">Português</option>
</select>
<input type="text" id="value">
<input type="text" id="text">
<script type="text/javascript">
function update() {
var select = document.getElementById('language');
var option = select.options[select.selectedIndex];
document.getElementById('value').value = option.value;
document.getElementById('text').value = option.text;
}
update();
</script>
</body>
</html>
Ricardo Metring
Full stack web developer and co-founder at Criar.io.
I've worked for over 10 years with software development. I'm constantly curious and learning.
