JavaScript: How to Get the Value of a Select or Dropdown List

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>

Did you find this helpful?

Ricardo Metring

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.

Related articles