jQuery erhält einen bestimmten Optionstag-Text

Also gut, sag ich habe das:

<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 hier nicht gefragt wird, wie der ausgewählte Textwert abgerufen werden soll, sondern nur einer von ihnen, ob ausgewählt oder nicht, abhängig vom Wertattribut. Ich habe es versucht:

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

Aber es funktioniert nicht.

Es wird nach einem Element mit der ID gesucht, listdessen Eigenschaft valuegleich ist 2.
Was Sie wollen, ist das optionKind von list:

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

Wenn Sie die Option mit dem Wert 2 erhalten möchten, verwenden Sie

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

Wenn Sie die aktuell ausgewählte Option erhalten möchten, verwenden Sie

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

Dies funktionierte perfekt für mich. Ich suchte nach einer Möglichkeit, zwei verschiedene Werte mit von MySQL generierten Optionen zu senden. Folgendes ist allgemein und dynamisch:

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

Wie in einem der Kommentare erwähnt. Damit konnte ich eine dynamische Funktion erstellen, die mit allen meinen Auswahlfeldern funktioniert, für die ich beide Werte, den Optionswert und den Text erhalten möchte.

Vor ein paar Tagen habe ich festgestellt, dass beim Aktualisieren der jQuery von 1.6 auf 1.9 der Site, auf der ich diesen Code verwendet habe, dies nicht mehr funktioniert ... wahrscheinlich ein Konflikt mit einem anderen Code ... die Lösung bestand darin, die Option aus der zu entfernen find () call:

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

Das war meine Lösung ... benutze sie nur, wenn du nach dem Update deiner jQuery ein Problem hast.

Basierend auf dem ursprünglichen HTML-Code von Paolo habe ich Folgendes gefunden.

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

Es wurde getestet, um mit Internet Explorer und Firefox zu funktionieren.

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

für mehrere ausgewählte Werte in der #list Element.

1. Wenn auf der Seite nur ein Auswahl-Tag vorhanden ist, können Sie die Auswahl innerhalb der ID-Liste angeben.

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

2. Um ausgewählten Text zu erhalten

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

Versuche Folgendes:

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

Der Grund, warum Ihr ursprüngliches Snippet nicht funktioniert hat, ist, dass Ihre OPTIONTags Ihrem SELECTTag untergeordnet sind id list.

Dies ist eine alte Frage, die seit einiger Zeit nicht mehr aktualisiert wurde. Der richtige Weg, dies jetzt zu tun, wäre die Verwendung

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

Ich hoffe das hilft :-)

Ich wollte das ausgewählte Label bekommen. Dies hat bei mir in jQuery 1.5.1 funktioniert.

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

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

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

Lassen Sie nach dem ID-Selektor ein Leerzeichen.

Sie können den ausgewählten Optionstext mithilfe der Funktion abrufen .text();

Sie können die Funktion folgendermaßen aufrufen:

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

Beim "Durchlaufen" dynamisch erstellter Elemente mit .each (function () ...): $("option:selected").text();und$(this + " option:selected").text() gab den ausgewählten Optionstext nicht zurück - stattdessen war er null.

Aber die Lösung von Peter Mortensen hat funktioniert:

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

Ich weiß nicht, warum der übliche Weg in a nicht gelingt .each() (wahrscheinlich mein eigener Fehler), aber danke, Peter. Ich weiß, dass dies nicht die ursprüngliche Frage war, erwähne sie jedoch "für Neulinge, die über Google kommen".

Ich hätte damit begonnen, $('#list option:selected").each()außer dass ich auch Sachen aus dem Auswahlelement holen musste.

Verwenden:

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

Ich suchte nach einem Wert für den internen Feldnamen anstelle der ID und kam von Google zu diesem Beitrag, der mir half, aber nicht die Lösung fand, die ich brauchte, aber ich bekam die Lösung und hier ist sie:

Dies kann also jemandem helfen, nach einem ausgewählten Wert mit einem internen Feldnamen zu suchen, anstatt eine lange ID für SharePoint-Listen zu verwenden:

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

Ich brauchte diese Antwort, da ich mich mit einem dynamisch gegossenen Objekt befasste, und die anderen Methoden hier schienen nicht zu funktionieren:

element.options[element.selectedIndex].text

Dies verwendet natürlich das DOM- Objekt, anstatt seinen HTML-Code mit nodeValue, childNodes usw. zu analysieren.

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 in jQuery erwähnt, erhalten Sie einen bestimmten Optionstag-Text und platzieren eine dynamische Variable auf dem Wert

Als alternative Lösung können Sie auch einen Kontextteil des jQuery-Selektors verwenden , um <option>Elemente value="2"innerhalb der Dropdown-Liste zu finden:

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

Ich wollte eine dynamische Version für Select Multiple, die anzeigt, was rechts ausgewählt ist (ich wünschte, ich hätte weiter 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>

Sie haben eine der folgenden Möglichkeiten

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