jQuery obtém o texto da tag de opção específica

Tudo bem, diga que tenho isso:

<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

Como seria o seletor se eu quisesse obter a "Opção B" quando tiver o valor '2'?

Observe que isso não está perguntando como obter o valor de texto selecionado , mas apenas qualquer um deles, selecionado ou não, dependendo do atributo value. Eu tentei:

$("#list[value='2']").text();

Mas isto não está funcionando.

Ele está procurando um elemento com id listque tenha uma propriedade valueigual a 2.
O que você quer é o optionfilho do list:

$("#list option[value='2']").text()

Se você deseja obter a opção com o valor 2, use

$("#list option[value='2']").text();

Se você deseja obter a opção atualmente selecionada, use

$("#list option:selected").text();

Isso funcionou perfeitamente para mim, eu estava procurando uma maneira de enviar dois valores diferentes com opções geradas pelo MySQL, e o seguinte é genérico e dinâmico:

$(this).find("option:selected").text();

Como mencionado em um dos comentários. Com isso, fui capaz de criar uma função dinâmica que funciona com todas as minhas caixas de seleção e desejo obter os dois valores, o valor da opção e o texto.

Alguns dias atrás, notei que, ao atualizar o jQuery de 1.6 para 1.9 do site, usei esse código, este parou de funcionar ... provavelmente havia um conflito com outro trecho de código ... de qualquer maneira, a solução era remover a opção do chamada find ():

$(this).find(":selected").text();

Essa foi a minha solução ... use-a apenas se você tiver algum problema após atualizar seu jQuery.

Com base no HTML original publicado por Paolo, criei o seguinte.

$("#list").change(function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

Foi testado para funcionar no Internet Explorer e Firefox.

$("#list option:selected").each(function() {
   alert($(this).text());
});  

para vários valores selecionados no #listelemento.

1. Se houver apenas uma tag de seleção na página, você poderá especificar a seleção dentro do id 'list'

   jQuery("select option[value=2]").text();

2. Para obter o texto selecionado

   jQuery("select option:selected").text();

Tente o seguinte:

$("#list option[value=2]").text();

O motivo pelo qual seu snippet original não estava funcionando é porque suas OPTIONtags são filhos da sua SELECTtag, que possui o id list.

Esta é uma pergunta antiga que não foi atualizada há algum tempo. A maneira correta de fazer isso agora seria usar

$("#action").on('change',function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

Eu espero que isso ajude :-)

Eu queria obter o rótulo selecionado. Isso funcionou para mim no jQuery 1.5.1.

$("#list :selected").text();

$(this).children(":selected").text()

$("#list [value='2']").text();

deixe um espaço após o seletor de identificação.

Você pode obter o texto da opção selecionada usando a função .text();

você pode chamar a função assim:

jQuery("select option:selected").text();

Enquanto "faz um loop" através de elementos selecionados criados dinamicamente com um .each (function () ...): $("option:selected").text();e$(this + " option:selected").text() fazia não retornou o texto da opção selecionada - em vez disso, era nulo.

Mas a solução de Peter Mortensen funcionou:

$(this).find("option:selected").text();

Não sei por que a maneira usual não é bem-sucedida em um .each() (provavelmente meu próprio erro), mas obrigado, Peter. Eu sei que essa não era a pergunta original, mas estou mencionando "para iniciantes que chegam pelo Google".

Eu teria começado, $('#list option:selected").each()exceto que eu precisava pegar coisas do elemento select também.

Usar:

function selected_state(){
    jQuery("#list option").each(function(){
        if(jQuery(this).val() == "2"){
            jQuery(this).attr("selected","selected");
            return false;
        }
    });
}

jQuery(document).ready(function(){
    selected_state();
});

Eu estava procurando obter val pelo nome do campo interno em vez do ID e vim do google para este post que ajudou, mas não encontrou a solução que eu precisava, mas obtive a solução e aqui está:

Portanto, isso pode ajudar alguém que procura o valor selecionado com o nome interno do campo, em vez de usar o ID longo nas listas do SharePoint:

var e = $('select[title="IntenalFieldName"] option:selected').text(); 

Eu precisava dessa resposta, pois estava lidando com um objeto convertido dinamicamente e os outros métodos aqui não pareciam funcionar:

element.options[element.selectedIndex].text

É claro que isso usa o objeto DOM em vez de analisar seu HTML com nodeValue, childNodes, etc.

Uma dica: você pode usar o código abaixo se seu valor for dinâmico:

$("#list option[value='"+aDynamicValue+"']").text();

Ou (melhor estilo)

$("#list option").filter(function() {
     return this.value === aDynamicValue;
}).text();

Conforme mencionado no jQuery, obtenha o texto da tag de opção específica e coloque a variável dinâmica no valor

Como solução alternativa, você também pode usar uma parte de contexto do seletor jQuery para encontrar <option>elementos value="2"dentro da lista suspensa:

$("option[value='2']", "#list").text();

Eu queria uma versão dinâmica para selecionar vários que exibisse o que está selecionado à direita (gostaria de ter lido e visto $(this).find... mais cedo):

<script type="text/javascript">
    $(document).ready(function(){
        $("select[showChoices]").each(function(){
            $(this).after("<span id='spn"+$(this).attr('id')+"' style='border:1px solid black;width:100px;float:left;white-space:nowrap;'>&nbsp;</span>");
            doShowSelected($(this).attr('id'));//shows initial selections
        }).change(function(){
            doShowSelected($(this).attr('id'));//as user makes new selections
        });
    });
    function doShowSelected(inId){
        var aryVals=$("#"+inId).val();
        var selText="";
        for(var i=0; i<aryVals.length; i++){
            var o="#"+inId+" option[value='"+aryVals[i]+"']";
            selText+=$(o).text()+"<br>";
        }
        $("#spn"+inId).html(selText);
    }
</script>
<select style="float:left;" multiple="true" id="mySelect" name="mySelect" showChoices="true">
    <option selected="selected" value=1>opt 1</option>
    <option selected="selected" value=2>opt 2</option>
    <option value=3>opt 3</option>
    <option value=4>opt 4</option>
</select>

Você pode obter uma das seguintes maneiras

$("#list").find('option').filter('[value=2]').text()

$("#list").find('option[value=2]').text()

$("#list").children('option[value=2]').text()

$("#list option[value='2']").text()

$(function(){    
    
    console.log($("#list").find('option').filter('[value=2]').text());
    console.log($("#list").find('option[value=2]').text());
    console.log($("#list").children('option[value=2]').text());
    console.log($("#list option[value='2']").text());
    
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>