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>
