jQuery get specific option tag text

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

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

Jeśli chcesz uzyskać wybraną opcję, Użyj

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

To działało idealnie dla mnie, szukałem sposobu, aby wysłać dwie różne wartości z opcjami generowanymi przez MySQL, a poniżej jest ogólny i dynamiczny:

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

Jak wspomniano w jednym z komentarzy. Dzięki temu udało mi się stworzyć dynamiczną funkcję, która działa ze wszystkimi moimi polami wyboru, które chcę uzyskać zarówno wartości, wartość opcji, jak i tekst.

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

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

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

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

Został przetestowany do pracy na Internet Explorer i Firefox.

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

Dla wielu wybranych wartości w elemencie #list.

1. Jeśli na stronie znajduje się tylko jeden znacznik 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:

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

Powodem, dla którego twój oryginalny fragment nie działał, jest to, że Twoje tagi OPTION są dziećmi twojego tagu SELECT, który ma id list.

Jest to stare pytanie, które nie zostało zaktualizowane przez jakiś czas, poprawnym sposobem zrobienia tego teraz byłoby użycie

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

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

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

Chciałem dostać wybraną etykietę. To działało u mnie w jQuery 1.5.1.

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

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

Pozostaw spację po selektorze id.

Można uzyskać zaznaczony tekst opcji za pomocą funkcji .text();

Możesz wywołać funkcję w następujący sposób:

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

Podczas" zapętlania " przez dynamicznie tworzone elementy zaznaczamy za pomocą .each (function ()...): $("option:selected").text(); i $(this + " option:selected").text() nie zwróciły zaznaczonego tekstu opcji - zamiast tego było null.

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

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

Nie wiem, dlaczego zwykły sposób nie udaje się .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, którzy przychodzą przez Google."

Zacząłbym od $('#list option:selected").each() poza tym, że musiałem też pobrać rzeczy z elementu select.

Użycie:

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 uzyskania val przez wewnętrzną nazwę pola zamiast ID i przyszedłem z google do tego postu, który pomógł, ale nie znalazłem rozwiązania, którego potrzebuję, ale mam rozwiązanie i oto jest:

Więc może to pomóc komuś, kto szuka wybranej wartości z nazwą wewnętrzną pola, zamiast używać długiego id 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 parsowania kodu 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 get specific option tag text and placeing dynamic variable to the value

Jako alternatywne rozwiązanie, możesz również użyć części kontekstowej selektora jQuery , aby znaleźć <option> element(Y) Z value="2" wewnątrz rozwijanej listy:

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

Chciałem dynamiczną wersję dla select multiple, która wyświetla to, co jest zaznaczone po prawej stronie (chciałbym przeczytać i zobaczyć $(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>