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.


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

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

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.


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.


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.


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

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.


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


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

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

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.


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

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.


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

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

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.




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>

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>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.