jQuery otrzymuje określony tekst znacznika opcji

W porządku, powiedz, że mam to:

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

Jak wyglądałby selektor, gdybym chciał uzyskać „opcję B”, gdy mam wartość „2”?

Należy pamiętać, że nie jest to pytanie, jak uzyskać wybraną wartość tekstową, ale tylko dowolną z nich, niezależnie od tego, czy została wybrana, czy nie, w zależności od atrybutu value. Próbowałem:

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

Ale to nie działa.

Szuka elementu o identyfikatorze, listktóry ma właściwość valuerówną 2.
To, czego chcesz, to optiondziecko list:

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

Jeśli chcesz uzyskać opcję o wartości 2, użyj

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

Jeśli chcesz uzyskać opcję, która jest aktualnie wybrana, użyj

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

Działa to idealnie dla mnie, szukałem sposobu na przesłanie dwóch różnych wartości z opcjami generowanymi przez MySQL, a poniższe są ogólne i dynamiczne:

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

Jak wspomniano w jednym z komentarzy. Dzięki temu mogłem stworzyć funkcję dynamiczną, która działa ze wszystkimi moimi polami wyboru, w których chcę uzyskać obie wartości, wartość opcji i tekst.

Kilka dni temu zauważyłem, że podczas aktualizacji jQuery z 1.6 do 1.9 strony użyłem tego kodu, ten przestał działać ... prawdopodobnie był to konflikt z innym fragmentem kodu ... w każdym razie rozwiązaniem było usunięcie opcji z wywołanie find ():

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

To było moje rozwiązanie ... używaj go tylko wtedy, gdy masz problem z aktualizacją jQuery.

Na podstawie oryginalnego kodu HTML opublikowanego przez Paolo wymyśliłem następujące.

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

Został przetestowany do pracy z przeglądarkami Internet Explorer i Firefox.

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

dla wielu wybranych wartości w #listelemencie.

1. Jeśli na stronie znajduje się tylko jeden tag select, możesz określić select wewnątrz id „list”

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

2. Aby uzyskać zaznaczony tekst

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

Spróbuj wykonać następujące czynności:

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

Powodem, dla którego oryginalny fragment kodu nie działał, jest to, że OPTIONtagi są potomkami SELECTtagu, który ma id list.

To jest stare pytanie, które nie było aktualizowane od jakiegoś czasu. Prawidłowym sposobem na zrobienie tego byłoby użycie tego

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

Mam nadzieję, że to pomoże :-)

Chciałem uzyskać wybraną wytwórnię. To działało dla mnie w jQuery 1.5.1.

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

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

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

zostaw spację za selektorem id.

Możesz uzyskać wybrany tekst opcji za pomocą funkcji .text();

możesz wywołać funkcję w ten sposób:

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

Podczas „zapętlania” przez dynamicznie tworzone elementy zaznaczania za pomocą .each (function () ...): $("option:selected").text();i $(this + " option:selected").text()nie zwracał zaznaczonego tekstu opcji - zamiast tego był pusty.

Ale rozwiązanie Petera Mortensena zadziałało:

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

Nie wiem, dlaczego zwykły sposób się nie udaje .each() (prawdopodobnie mój własny błąd), ale dziękuję, Peter. Wiem, że to nie było oryginalne pytanie, ale wspominam o nim „dla początkujących przybywających przez Google”.

Zaczynałbym od $('#list option:selected").each()tego, że musiałem również pobrać rzeczy z wybranego elementu.

Posługiwać się:

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

Szukałem Val dzięki wewnętrznej nazwie pola zamiast ID i przyszedłem z Google na ten post, który pomógł, ale nie znalazłem rozwiązania, którego potrzebuję, ale dostałem rozwiązanie i oto:

Może to pomóc komuś, kto szuka wybranej wartości o wewnętrznej nazwie pola zamiast długiego identyfikatora dla list SharePoint:

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

Potrzebowałem tej odpowiedzi, ponieważ miałem do czynienia z dynamicznie rzucanym obiektem, a inne metody tutaj nie działały:

element.options[element.selectedIndex].text

To oczywiście używa obiektu DOM zamiast analizować jego HTML za pomocą nodeValue, childNodes itp.

Wskazówka: możesz użyć poniższego kodu, jeśli twoja wartość jest dynamiczna:

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

Lub (lepszy styl)

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

Jak wspomniano w jQuery, pobierz określony tekst znacznika opcji i umieść zmienną dynamiczną na wartości

Jako alternatywne rozwiązanie można również użyć części kontekstowej selektora jQuery, aby znaleźć <option>elementy z value="2"listą rozwijaną:

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

Chciałem wersji dynamicznej dla zaznaczonej wielokrotności, która wyświetlałaby to, co zaznaczono po prawej stronie (chciałbym czytać i widzieć $(this).find... wcześniej):

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

Możesz uzyskać jeden z następujących sposobów

$("#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>