jQuery otrzymuje określony tekst znacznika opcji

1234

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.

Paolo Bergantino
źródło
W tym okresie użyj:$("#list option").filter(function () { return $(this).html() == "stuff"; }).val();
wieża

Odpowiedzi:

1122

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

$("#list option[value='2']").text()
pseudonim
źródło
4
Dziękuję za ten nick. Oto odpowiedź rozszerzona, jeśli chcesz uzyskać wartość dynamicznie: var selectValue = document.getElementById ('list'). Value; var selectOption = $ ("# list list [value =" + selectValue + "]"). text (); /// dobry przykład nickf.
Kevin Florida,
283
@ Kevin, w takim przypadku możesz skorzystać z odpowiedzi poniżej. $('#list option:selected').text()
nickf
6
@nickf i prościej,$('#list').val()
Derek 朕 會 功夫
36
@Derek, val () nie poda tekstu opcji, poda jej wartość, która w niektórych przypadkach (wielu śmiem twierdzić) nie jest taka sama.
itsmequinn,
zawsze powinieneś używać .trim()po, .text()ponieważ niektóre przeglądarki mogą czasami dodawać spacje przed i po tekście, które są niewidoczne dla użytkownika, ale mogą prowadzić do uzyskania błędnych wartości$("#list option[value='2']").text().trim()
Hassan ALAMI
1262

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();
ArtOfWarfare
źródło
11
Aby uzyskać wartość zamiast tekstu, musisz napisać: - $ („select # list”). Val (); Wiem, że nie jest to rzeczywista odpowiedź na zadane pytanie, ale wciąż zastanawiałem się nad tym, by wspomnieć o tym punkcie dla początkujących użytkowników korzystających z Google.
Wiedza głodna
Używam $ („# opcja listy: wybrana”). Text () i $ („# opcja listy: wybrana”). Attr ('wartość')
fullstacklife
Aby uzyskać wybrany tekst (chociaż pytanie nie wymagało tego konkretnie), ta metoda jest lepsza, ponieważ nie trzeba wiedzieć, jaka jest wybrana wartość.
TheJerm
132

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.

Raphie
źródło
2
podobno jest to bardziej efektywny sposób na zrobienie tego zgodnie z WebStorm 8.
dbinott
2
Chociaż ta odpowiedź jest wnikliwa i pomogła mi z problemem, który miałem, nitpick, nie odpowiada poprawnie na pytanie: Pamiętaj, że nie pyta, jak uzyskać wybraną wartość tekstową, ale tylko jedną z nich, niezależnie od tego, czy została wybrana lub nie, w zależności od atrybutu wartości.
StubbornShowaGuy
109

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.

asyadiqin
źródło
11
Alternatywą dla tego jest: $ („opcja: wybrana”, to) .text ()
Doug S
To lepsza odpowiedź, ponieważ uwzględnia złożone scenariusze, a nie tylko statyczny HTML i proste zdarzenia javascript.
oasisfleeting
37
$("#list option:selected").each(function() {
   alert($(this).text());
});  

dla wielu wybranych wartości w #listelemencie.

m3ct0n
źródło
37
  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();
Beena Shetty
źródło
24

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.

Andrew Moore
źródło
19

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

mindmyweb
źródło
To zdecydowanie nie jest poprawne Należy pamiętać, że nie jest to pytanie, jak uzyskać wybraną wartość tekstową
Wesley Smith
17

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

$("#list :selected").text();
Dilantha
źródło
17
$(this).children(":selected").text()
Avinash Saini
źródło
Niestety nie działa to, gdy masz optgroupznacznik jako dziecko selecti wybrana jest w tym opcja optgroup. wykorzystanie, $("#list option:selected").text();które działa nawet w tym przypadku
MartinM
13
$("#list [value='2']").text();

zostaw spację za selektorem id.

Pon
źródło
13

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

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

jQuery("select option:selected").text();
Dilipkumar63
źródło
10

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.

wieczność
źródło
8

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();
});
Mary Daisy Sanchez
źródło
5

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(); 
FAA
źródło
Solidne rozwiązanie. Przepraszam, jest tutaj w tak tajnym miejscu. Możesz znaleźć bardziej znaczące miejsce na zapewnienie tego rozwiązania. Może mógłbyś zadać i odpowiedzieć na własne pytanie?
Andrew Kozak,
4

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.

Martin Clemens Bloch
źródło
3

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();
Wizja
źródło
2

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>
Gordon
źródło
2

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>

Anfath Hifans
źródło