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

1234

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.

Paolo Bergantino
fonte
Durante esse período, use:$("#list option").filter(function () { return $(this).html() == "stuff"; }).val();
rook

Respostas:

1122

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()
nickf
fonte
4
Obrigado por este nickf. Aqui está essa resposta expandida se você deseja obter o valor dinamicamente: var selectValue = document.getElementById ('list'). Value; var selectOption = $ ("# opção da lista [value =" + selectValue + "]"). text (); /// bom exemplo de nickf.
Kevin Flórida
283
@ Kevin, nesse caso, convém usar a resposta abaixo desta. $('#list option:selected').text()
nickf
6
@nickf, e mais simples, #$('#list').val()
Derek 朕 會 功夫
36
@Derek, val () não fornecerá o texto da opção, ele fornecerá seu valor, que em alguns casos (muitos ouso dizer) não é o mesmo.
itsmequinn
você deve sempre usar .trim()depois, .text()pois algum navegador pode adicionar alguns espaços antes e depois do texto que são invisíveis para o usuário, mas que podem levar a valores errados$("#list option[value='2']").text().trim()
Hassan ALAMI
1262

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();
ArtOfWarfare
fonte
11
Para obter o valor em vez do texto, você precisará escrever: - $ ("selecione # lista"). Val (); Eu sei que essa não é a resposta real da pergunta, mas ainda pensei em mencionar esse ponto para iniciantes que chegam pelo Google.
Desejo de conhecimento
Eu uso $ ( "# opção de lista: selecionado") texto () e $ ( "lista de opções #: selecionado").. Attr ( 'value')
fullstacklife
Para obter o texto selecionado (mesmo que a pergunta não tenha sido solicitada especificamente), esse método é superior por não precisar saber qual é o valor selecionado.
theJerm 12/09/12
132

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.

raphie
fonte
2
supostamente esta é a maneira mais eficiente de fazê-lo de acordo com WebStorm 8.
dbinott
2
Embora esta resposta seja esclarecedora e tenha me ajudado com um problema que eu estava tendo, para nitpick, ela não responde adequadamente à pergunta: Observe que isso não está perguntando como obter o valor do texto selecionado, mas apenas qualquer uma delas, seja selecionada ou não, dependendo do atributo value.
StubbornShowaGuy
109

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.

asyadiqin
fonte
11
Uma alternativa para isso é: $ ("option: selected", this) .text ()
Doug S
Essa é uma resposta melhor, pois explica cenários complexos, não apenas html estático e eventos javascript simples.
Oasisfleeting
37
$("#list option:selected").each(function() {
   alert($(this).text());
});  

para vários valores selecionados no #listelemento.

m3ct0n
fonte
37
  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();
Beena Shetty
fonte
24

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.

Andrew Moore
fonte
19

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 :-)

mindmyweb
fonte
Isto definitivamente não é correto nota por favor que este não está pedindo como obter o valor de texto selecionado
Wesley Smith
17

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

$("#list :selected").text();
Dilantha
fonte
17
$(this).children(":selected").text()
Avinash Saini
fonte
Infelizmente, isso não funciona quando você tem uma optgrouptag como filha sua selecte a opção selecionada está nela optgroup. uso $("#list option:selected").text();que funciona mesmo neste caso
MartinM
13
$("#list [value='2']").text();

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

seg
fonte
13

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();
Dilipkumar63
fonte
10

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.

eon
fonte
8

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();
});
Mary Daisy Sanchez
fonte
5

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(); 
FAA
fonte
Solução sólida. Desculpe, está em um lugar tão secreto aqui. Você pode encontrar um lugar mais importante para fornecer esta solução. Talvez você possa perguntar e responder uma pergunta sua?
quer
4

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.

Martin Clemens Bloch
fonte
3

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();
Visão
fonte
2

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>
gordon
fonte
2

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>

Anfath Hifans
fonte