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
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
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');
Muito obrigado esse post me ajudou muito, parabéns para quem compartilhou e ajudou obrigado mesmo.
Meu código corrigido:
$(window).load(function(){
$('#button').click(function(){
//var textAdd = $('#inpudAdd').val();
var textAdd = $('#inpudAdd').find(":selected").val();
var textAdd2 = $('#inpudAdd').find(":selected").text();
$('#inpudAdd').val('').focus();
$('.boxLista').append('<b id="item"><input type="checkbox" name="app[]" id="item" checked="checked" value="' + textAdd + '" > ' + textAdd2 + '</br></b> ');
});
$(document).on('click', '#item', function(){
$(this).remove();
});
});
$(window).load(function(){
$('#button2').click(function(){
//var textAdd = $('#inpudAdd2').val();
var textAdd = $( "#inpudAdd2 option:selected" ).val();;
//var textAdd2 = $('#inpudAdd2').find(":selected").text();
$('#inpudAdd2').val('').focus();
$('.boxLista').append('<b id="item2"><input type="checkbox" name="app[]" id="item2" checked="checked" value="' + textAdd + '" > ' + textAdd + '</br></b> ');
console.log(option);
});
$(document).on('click', '#item2', function(){
$(this).remove();
});
});