Welchen Selektor brauche ich, um eine Option anhand ihres Textes auszuwählen?


206

Ich muss überprüfen, ob a <select>eine Option hat, deren Text einem bestimmten Wert entspricht.

Wenn es zum Beispiel eine gibt <option value="123">abc</option>, würde ich nach "abc" suchen.

Gibt es einen Selektor, um dies zu tun?

Ich suche etwas Ähnliches, $('#select option[value="123"]');aber für den Text.


Hmm ... die hasAntwort in SLaks ist nützlich, aber der Punkt in Floyds Antwort ist auch gut ... Ich weiß nicht, was ich akzeptieren soll.
Hagelholz

Sind diese auch zwischen Groß- und Kleinschreibung zu unterscheiden? (Ich bin auf der Suche nach Groß- und Kleinschreibung und kann immer nur auf niedriger
umstellen

1
Ich verwende die JavaScript-Kernfunktion .toLowerCase () und vergleiche, ob Groß- und Kleinschreibung nicht erforderlich ist. Akzeptieren Sie als Antwort auch diejenige, die für Ihre gestellte Frage am nützlichsten ist. :)
Hari Pachuveetil

es funktioniert nicht für ein Dropdown mit Multiselect API? Ich habe alle möglichen Lösungen ausprobiert, aber kein Glück. Ich verwende die Multiselect-Dropdowm-API von Eric Hynd. Kann jemand dieses Problem lösen?
Chaitanya Chandurkar

Antworten:


319

Dies könnte helfen:

$('#test').find('option[text="B"]').val();

Demo Geige

Dies würde Ihnen die Option mit Text geben B und nicht diejenigen, die Text enthalten B. Hoffe das hilft

Für neuere Versionen von jQuery funktioniert das oben Gesagte nicht. Wie von Quandary unten kommentiert , funktioniert dies für jQuery 1.9.1:

$('#test option').filter(function () { return $(this).html() == "B"; }).val();

Geige aktualisiert


1
Dies funktioniert nicht mit den neuesten Versionen von jquery (wenn Sie 'value =' aus <option> entfernen)
KevinDeus

27
@ KevinDeus: Warum das Downvote? Die Antwort war dann für die Version von jQuery!
Hari Pachuveetil

11
Verwenden Sie stattdessen $ ('# test option'). Filter (function () {return $ (this) .html () == "B";}). Val ();
Stefan Steiger

84
@Quandary Trotzdem ist es kein triftiger Grund, die Antwort abzustimmen, wenn ein kurzer Kommentar ausreichen würde. Oder erwarten Sie von ihm, dass er alle seine Antworten für jede neue Version von jQuery erneut testet?
WynandB

2
Ich denke, die Abwertung ist auf die Tatsache zurückzuführen, dass das obige Beispiel nur den ausgewählten Wert findet und den ausgewählten Wert nicht festlegt.
nivs1978

133

Sie können die Verwendung :contains()Selektor Elemente auszuwählen , die einen bestimmten Text enthalten.
Beispielsweise:

$('#mySelect option:contains(abc)')

<select>Verwenden Sie die folgende .has()Methode , um zu überprüfen, ob ein bestimmtes Element über eine solche Option verfügt :

if (mySelect.has('option:contains(abc)').length)

<select>Verwenden Sie den :has()Selektor, um alle s zu finden , die eine solche Option enthalten :

$('select:has(option:contains(abc))')

3
:containsist jetzt nicht endgültig, oder?
Hari Pachuveetil

Was ist das Problem genau mit enthält?
Ogier Schelvis

Wie würden Sie dies nur mit ausgewählten Optionen tun?
Toddmo

Ergreift dies nicht auch eine Option mit 123abcdef?
Teepeemm

@Teepeemm Ja, das ist der Unterschied zwischen den beiden Top-Antworten. Die oberste Prüfung gibt nur die Option mit nur dem spezifischen Text zurück. Diese Option gibt die Option zurück, die diesen spezifischen Text enthält, aber nicht nur ist. Was ich im Moment eigentlich brauche, deshalb bin ich sehr froh, dass ich es gepostet habe.
Lee A.

30

Keiner der vorherigen Vorschläge hat in jQuery 1.7.2 für mich funktioniert, da ich versuche, den ausgewählten Index der Liste basierend auf dem Wert aus einem Textfeld festzulegen, und einige Textwerte in mehreren Optionen enthalten sind. Am Ende habe ich Folgendes verwendet:

$('#mySelect option:contains(' + value + ')').each(function(){
    if ($(this).text() == value) {
        $(this).attr('selected', 'selected');
        return false;
    }
    return true;
});

1
Ich denke, dies ist die beste Antwort, da sie tatsächlich die richtigen Ergebnisse liefert. Aber ich kann nicht anders, als zu denken, dass das Weglassen containsinsgesamt die Dinge tatsächlich beschleunigen kann.
Styfle

Dies funktionierte für mich, aber in meinem Szenario konnte ich mehrmals auf Bearbeiten in einem Raster klicken und musste das ausgewählte Attribut entfernen, wenn keine Übereinstimmung vorhanden war. Andernfalls blieb die erste ausgewählte Option für nachfolgende Änderungen erhalten. sonst {$ (this) .attr ('ausgewählt', ''); falsch zurückgeben; }
besonders am

Diese Lösung funktionierte für mich, aber anstatt das Optionsattribut festzulegen, um das Auswahlmenü, das ich tun musste, tatsächlich zu ändern: $(this).parent().val($(this).val()); Sie könnten wahrscheinlich beides tun, aber für mich hat nur das Festlegen des übergeordneten val()Elements den Trick getan.
Billynoah


15

Das hat bei mir funktioniert: $("#test").find("option:contains('abc')");


3
Sie sollten eine Erklärung hinzufügen, warum es auch funktioniert.
Hannes Johansson

@HannesJohansson Oder er sollte zumindest erklären, wie es sich von SLaks Antwort unterscheidet oder etwas Neues hinzufügt, das fast fünf Jahre älter ist. ; ^)
Ruffin

4
Stellen Sie sicher, dass Sie feststellen, dass auch diese Option verfügbar ist: <option> abcd </ option>.
Charles

Danke, das ist definitiv richtig und was alle verpasst haben, ist das Hinzufügen von .attr ('Wert'); bis zum Ende. Dies ist der einfachste Weg, um den Wert tatsächlich dynamisch zu nutzen! Der vollständige Code sollte also so aussehen. $("#testselect").find("option:contains('option-text')").attr('value'); Auf diese Weise können Sie ein Ereignis verwenden .click(), um eine Einstellung zu ändern.
ChrisKsag

12

Dies ist die beste Methode zum Auswählen von Text in der Dropdown-Liste.

$("#dropdownid option:contains(your selected text)").attr('selected', true);

3
Wie bei ähnlichen Antworten findet dies eine Option mit this is your selected text plus more.
Teepeemm

4

Ich habe einige dieser Dinge ausprobiert, bis ich eines bekam, das sowohl in Firefox als auch im IE funktioniert. Das habe ich mir ausgedacht.

$("#my-Select").val($("#my-Select" + " option").filter(function() { return this.text == myText }).val());

eine andere Art, es lesbarer zu schreiben:

var valofText = $("#my-Select" + " option").filter(function() {
    return this.text == myText
}).val();
$(ElementID).val(valofText);

Pseudocode:

$("#my-Select").val( getValOfText( myText ) );


Was ist der Sinn von "#my-Select" + " option"? Warum nicht einfach "#my-Select option"?
Teepeemm

3

Verwenden Sie Folgendes

$('#select option:contains(ABC)').val();

1
Der von Ihnen angegebene Code kann das Problem möglicherweise beheben. Fügen Sie jedoch eine kurze Beschreibung hinzu, wie das Problem dadurch behoben wird. Willkommen bei Stack Overflow, empfohlenes Lesen der Antwort .
Dan Beaulieu

3
Wenn es einige Optionen gibt: ABC, ABCD, ABCDEF, dann?
hungndv

1

Dies funktioniert in jQuery 1.6 (Doppelpunkt vor der öffnenden Klammer beachten), schlägt jedoch bei den neueren Versionen (zu diesem Zeitpunkt 1.10) fehl.

$('#mySelect option:[text=abc]")

5
Interessant, aber leider scheint es nicht zu funktionieren (jQuery 1.10.2).
WynandB

Sie möchten einschließen, dass so etwas $("#mySelect option").filter(function() { return this.text == "abc"; });mit den neuesten Versionen von jQuery funktioniert. Oder wahrscheinlich auf eine andere Art und Weise, die Sie bevorzugen.
Fr0zenFyr

1

Für jquery hat Version 1.10.2 unten für mich funktioniert

  var selectedText="YourMatchText";
    $('#YourDropdownId option').map(function () {
       if ($(this).text() == selectedText) return this;
      }).attr('selected', 'selected');
    });

1

Diese Arbeit für mich

$('#mySelect option:contains(' + value + ')').attr('selected', 'selected');

0

Das funktioniert bei mir:

var result = $('#SubjectID option')
            .filter(function () 
             { return $(this).html() == "English"; }).val();

Die resultVariable gibt den Index des übereinstimmenden Textwerts zurück. Jetzt werde ich es einfach mit seinem Index einstellen:

$('#SubjectID').val(result);

-1

Entweder durchlaufen Sie die Optionen oder Sie fügen denselben Text in ein anderes Attribut der Option ein und wählen damit aus.


-1

Dies wird auch funktionieren.

$ ('# test'). find ("Auswahloption: enthält ('B')"). filter (": selected");


2
Dies wird auch die Option ergreifen ABC.
Teepeemm

-1

Wie in dieser Antwort beschrieben , können Sie ganz einfach Ihren eigenen Selektor für hasText erstellen. Auf diese Weise können Sie die Option mit finden$('#test').find('option:hastText("B")').val();

Hier ist die hasText-Methode, die ich hinzugefügt habe:

 if( ! $.expr[':']['hasText'] ) {
     $.expr[':']['hasText'] = function( node, index, props ) {
       var retVal = false;
       // Verify single text child node with matching text
       if( node.nodeType == 1 && node.childNodes.length == 1 ) {
         var childNode = node.childNodes[0];
         retVal = childNode.nodeType == 3 && childNode.nodeValue === props[3];
       }
       return retVal;
     };
  }

-2

Das funktioniert bei mir

var options = $(dropdown).find('option');
var targetOption = $(options).filter(
function () { return $(this).html() == value; });

console.log($(targetOption).val());

Danke für alle Beiträge.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.