jQuery erhalten spezifische Option Tag Text

Question

Na gut, sagen wir, ich habe das hier:

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

Wie würde der Selektor aussehen, wenn ich "Option B" erhalten möchte, wenn ich den Wert "2" habe?

Bitte beachten Sie, dass es hier nicht um die Frage geht, wie man die ausgewählt Textwert, sondern ein beliebiger davon, ob ausgewählt oder nicht, je nach Wertattribut. Ich habe es versucht:

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

Aber es funktioniert nicht.

Answer 1

Ein Tipp: Sie können den folgenden Code verwenden, wenn Ihr Wert dynamisch ist:

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

Oder (besserer Stil)

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

Wie bereits in jQuery erhalten spezifische Option Tag Text und Platzierung dynamischer Variable auf den Wert

Answer 2

Ich brauchte diese Antwort, da ich es mit einem dynamisch gecasteten Objekt zu tun hatte, und die anderen Methoden hier nicht zu funktionieren schienen:

element.options[element.selectedIndex].text

Dabei wird natürlich die DOM Objekt, anstatt dessen HTML mit nodeValue, childNodes usw. zu analysieren.

Answer 3

Als alternative Lösung können Sie auch eine Kontextteil des jQuery-Selektors zu finden <option> Element(e) mit value="2" innerhalb der Auswahlliste:

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

Answer 4

Ich wollte eine dynamische Version für Select Multiple, die anzeigen würde, was auf der rechten Seite ausgewählt ist (wünschte, ich hätte gelesen und gesehen $(this).find ... früher):

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

Answer 5

Sie können eine der folgenden Möglichkeiten wählen

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