4

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

3

4 Respostas 4

7

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>

7

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>

2
function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');
2

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();
    });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .