JavaScript: Como obter o valor de um Select ou Dropdown List

Obter o valor de um select em HTML é uma dúvida bastante recorrente. Saiba como retornar o valor e o texto de um dropdown list utilizando puro JavaScript ou jQuery.

Vamos supor que você possui o seguinte código:

<select id="language">
	<option value="pt" selected>Português</option>
	<option value="en">English</option>
	<option value="es">Español</option>
</select>

Existem duas informações relevantes que podemos recuperar neste caso.

O valor do option selecionado.
O texto do option selecionado.

Como obter o valor de um select

Para obter o valor de um select ou dropdown em HTML usando JavaScript puro, primeiro selecionamos a tag select, neste caso pelo id, e depois pegamos o valor selecionado através da propriedade selectedIndex.

	var select = document.getElementById('language');
	var value = select.options[select.selectedIndex].value;
	console.log(value); // pt

Será impresso no console o valor "pt" (Ctrl + Shift + J para abrir o console).

Obtendo o valor de um select com jQuery

$('#language').val(); // pt

Como obter o texto de um select

Para obter o conteúdo de um option, mas não o valor, o código é quase o mesmo, basta pegar a propriedade text ao invés de value.

	var select = document.getElementById('language');
	var text = select.options[select.selectedIndex].text;
	console.log(text); // Português

Será impresso no console o texto "Português" (Ctrl + Shift + J para abrir o console).

Obtendo o texto de um select com jQuery

$('#language :selected').text(); // Português

Exemplo completo

No código abaixo, ao alterarmos o valor do dropdown, o valor e texto do select é mostrado em um input field.

<!DOCTYPE html>
<html>
	<body>
		<select id="language" onChange="update()">
			<option value="pt">Português</option>
			<option value="en">English</option>
			<option value="es">Español</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>