Tenho o seguinte código:
<option value="1">item 1</option>
<option value="2">item 1</option>
<option value="3">item 1</option>
quero pegar o texto dentro do <option>
que estiver selecionada. Por exemplo:
texto1 = item 1
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeTenho o seguinte código:
<option value="1">item 1</option>
<option value="2">item 1</option>
<option value="3">item 1</option>
quero pegar o texto dentro do <option>
que estiver selecionada. Por exemplo:
texto1 = item 1
Podes usar usar select.children[select.selectedIndex]
e depois textContent
:
Exemplo:
var select = document.querySelector('select');
var option = select.children[select.selectedIndex];
var texto = option.textContent;
console.log(texto); // item 2
<select>
<option value="1">item 1</option>
<option value="2" selected>item 2</option>
<option value="3">item 3</option>
</select>
Essa é a maneira mais antiga/compatível, mas também podes usar .selectedOptions[0]
que retorna as options selecionadas. Neste caso como é um select não múltiplo ficaria assim:
var select = document.querySelector('select');
select.addEventListener('change', function() {
var option = this.selectedOptions[0];
var texto = option.textContent;
console.log(texto);
});
<select>
<option value="1">item 1</option>
<option value="2" selected>item 2</option>
<option value="3">item 3</option>
</select>
A resposta do Sergio já contempla o que foi pedido, entretanto gostaria de deixar uma alternativa utilizando jQuery:
$('#selectOption').change(function() {
var option = $('#selectOption').find(":selected").text();
console.log(option);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectOption">
<option value="1">Op1</option>
<option value="2">Op2</option>
<option value="3">Op3</option>
<option value="4">Op4</option>
<option value="5">Op5</option>
</select>
Utilizo o .change
para que quando ocorrer uma mudança no elemento com id igual a selectOption, seja encontrada, com o .find
a opção que está selecionada, usando o seletor :selected
. E então para fins de resposta devolvo a resposta no console, através de console.log()
.
Pode também fazer dessa outra maneira, um pouco mais simplificada, a qual também é utilizado o .change
para que quando ocorrer uma mudança no elemento com id igual a selectOption, seja encontrada a opção do com o seletor :selected
, e devolvido no console usando console.log()
, para fins de resposta:
$('#selectOption').change(function() {
var option = $( "#selectOption option:selected" ).text();
console.log(option);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectOption">
<option value="1">Op1</option>
<option value="2">Op2</option>
<option value="3">Op3</option>
<option value="4">Op4</option>
<option value="5">Op5</option>
</select>
function getSelectedText(elementId) {
var elt = document.getElementById(elementId);
if (elt.selectedIndex == -1)
return null;
return elt.options[elt.selectedIndex].text;
}
var text = getSelectedText('test');