Wie wählt man eine bestimmte Option in einem SELECT-Element in jQuery?

Question

Wenn Sie den Index, den Wert oder den Text kennen. auch wenn Sie keine ID für eine direkte Referenz haben.

Diese , este y este sind alles hilfreiche Antworten.

Beispiel Markierung

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

Answer 1

Ein Selektor zum Abrufen des mittleren Optionselements nach Wert lautet

$('.selDiv option[value="SEL1"]')

Für einen Index:

$('.selDiv option:eq(1)')

Für einen bekannten Text:

$('.selDiv option:contains("Selection 1")')

EDIT : Wie oben kommentiert, könnte der OP nach dem Ändern des ausgewählten Elements des Dropdowns gewesen sein. In Version 1.6 und höher wird die prop()-Methode empfohlen:

$('.selDiv option:eq(1)').prop('selected', true)

In älteren Versionen:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2 : nach Ryans Kommentar. Ein Treffer bei "Auswahl 10" könnte unerwünscht sein. Ich fand keine Selektor mit dem vollständigen Text übereinstimmen, aber ein Filter funktioniert:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3 : Vorsicht ist geboten bei $(e).text() da sie einen Zeilenumbruch enthalten kann, wodurch der Vergleich fehlschlägt. Dies geschieht, wenn die Optionen implizit geschlossen sind (keine </option> Tag):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

Wenn Sie einfach die e.text werden alle zusätzlichen Leerzeichen wie der hintere Zeilenumbruch entfernt, wodurch der Vergleich robuster wird.

Answer 2

Keine der oben genannten Methoden lieferte die Lösung, die ich brauchte, also dachte ich mir, ich würde das anbieten, was bei mir funktioniert hat.

$('#element option[value="no"]').attr("selected", "selected");

Answer 3

Sie können einfach Folgendes verwenden val() Methode:

$('select').val('the_value');

Answer 4

Nach Wert, was für mich funktioniert hat mit jQuery 1.7 war der unten stehende Code, versuchen Sie dies:

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

Answer 5

Es gibt eine Reihe von Möglichkeiten, dies zu tun, aber der sauberste Ansatz ist unter den Top-Antworten und vielen Argumenten verloren gegangen val() . Auch einige Methoden geändert, wie von jQuery 1.6, so dass dies ein Update benötigt.

In den folgenden Beispielen wird die Variable $select ist ein jQuery-Objekt, das auf die gewünschte <select> Tag, z.B. über die folgenden:

var $select = $('.selDiv .opts');

Anmerkung 1 - verwenden Sie val() für Wertübereinstimmungen:

Für den Werteabgleich ist die Verwendung von val() ist viel einfacher als die Verwendung eines Attributselektors: https://jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

Die Setter-Version von .val() ist implementiert auf select Tags durch Setzen des selected Eigenschaft einer passenden option mit demselben value und funktioniert daher auf allen modernen Browsern einwandfrei.

Anmerkung 2 - verwenden Sie prop('selected', true):

Wenn Sie den ausgewählten Status einer Option direkt setzen wollen, können Sie prop (nicht attr ) mit einer boolean (anstelle des Textwerts selected ):

z.B.. https://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

Anmerkung 3 - unbekannte Werte berücksichtigen:

Wenn Sie val() zur Auswahl einer <option> , aber der Wert wird nicht gefunden (kann je nach Quelle der Werte passieren), dann wird "nichts" ausgewählt und $select.val() wird zurückgegeben null .

Für das gezeigte Beispiel könnte man also aus Gründen der Robustheit etwas wie folgt verwenden https://jsfiddle.net/1250Ldqn/ :

var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

Anmerkung 4 - genaue Textübereinstimmung:

Wenn Sie einen genauen Text abgleichen möchten, können Sie eine filter mit Funktion. z.B. https://jsfiddle.net/yz7tu49b/2/ :

var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

Wenn Sie jedoch überflüssige Leerzeichen haben, sollten Sie die Prüfung mit einem Trimmzeichen versehen, wie in

    return $.trim(this.text) == "some value to match";

Anmerkung 5 - Übereinstimmung nach Index

Wenn Sie nach Index abgleichen wollen, indizieren Sie einfach die Kinder des Selects, z. B. https://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

Obwohl ich dazu neige, direkte DOM-Eigenschaften zu Gunsten von jQuery heutzutage zu vermeiden, um zukunftssicheren Code, so dass auch als getan werden könnte https://jsfiddle.net/yz7tu49b/5/ :

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

Anmerkung 6 - verwenden Sie change(), um die neue Auswahl auszulösen

In allen oben genannten Fällen wird das Änderungsereignis nicht ausgelöst. Dies ist so gewollt, damit Sie keine rekursiven Änderungsereignisse erhalten.

Um das Änderungsereignis bei Bedarf zu erzeugen, fügen Sie einfach einen Aufruf an .change() zum jQuery select Objekt. z.B. wird das allererste, einfachste Beispiel https://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

Es gibt auch viele andere Möglichkeiten, die Elemente mit Hilfe von Attributselektoren zu finden, wie [value="SEL2"] aber Sie müssen bedenken, dass Attributselektoren im Vergleich zu all diesen anderen Optionen relativ langsam sind.