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()
. Außerdem wurden einige Methoden ab jQuery 1.6 geändert, sodass ein Update erforderlich ist.
Für die folgenden Beispiele gehe ich davon aus, dass die Variable $select
ein jQuery-Objekt ist, das auf das gewünschte <select>
Tag zeigt, z. B. über Folgendes:
var $select = $('.selDiv .opts');
Hinweis 1 - Verwenden Sie val () für Wertübereinstimmungen:
Für die Wertübereinstimmung ist die Verwendung val()
viel einfacher als die Verwendung eines Attributselektors: https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
Die Setter-Version von .val()
wird auf select
Tags implementiert, indem die selected
Eigenschaft eines Matchings option
mit demselben festgelegt value
wird. Sie funktioniert also in allen modernen Browsern einwandfrei.
Hinweis 2 - Requisite verwenden ('ausgewählt', wahr):
Wenn Sie den ausgewählten Status einer Option direkt festlegen möchten, können Sie prop
(nicht attr
) einen boolean
Parameter (anstelle des Textwerts selected
) verwenden:
zB https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tag
Hinweis 3 - Unbekannte Werte berücksichtigen:
Wenn Sie ein val()
auswählen <option>
, der Wert jedoch nicht übereinstimmt (dies kann je nach Quelle der Werte auftreten), wird "nichts" ausgewählt und $select.val()
zurückgegeben null
.
Für das gezeigte Beispiel und aus Gründen der Robustheit könnten Sie also Folgendes 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 nach genauem Text übereinstimmen möchten, können Sie eine filter
with-Funktion verwenden. zB https://jsfiddle.net/yz7tu49b/2/ :
var $select = $('.selDiv .opts');
$select.children().filter(function(){
return this.text == "Selection 2";
}).prop('selected', true);
Wenn Sie jedoch möglicherweise zusätzliche Leerzeichen haben, möchten Sie dem Check möglicherweise einen Zuschnitt wie in hinzufügen
return $.trim(this.text) == "some value to match";
Anmerkung 5 - Übereinstimmung nach Index
Wenn Sie nach Index übereinstimmen möchten, indizieren Sie einfach die untergeordneten Elemente der Auswahl, z. B. https://jsfiddle.net/yz7tu49b/3/.
var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;
Obwohl ich heutzutage dazu neige, direkte DOM-Eigenschaften zugunsten von jQuery zu vermeiden, um zukunftssicheren Code zu verwenden, könnte dies auch als https://jsfiddle.net/yz7tu49b/5/ erfolgen :
var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);
Hinweis 6 - Verwenden Sie change (), um die neue Auswahl auszulösen
In allen oben genannten Fällen wird das Änderungsereignis nicht ausgelöst. Dies ist beabsichtigt, damit Sie nicht mit rekursiven Änderungsereignissen enden.
Fügen Sie zum Generieren des Änderungsereignisses bei Bedarf einfach einen Aufruf zum .change()
jQuery- select
Objekt hinzu. Das allererste einfachste Beispiel lautet beispielsweise https://jsfiddle.net/yz7tu49b/7/.
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
Es gibt auch viele andere Möglichkeiten, die Elemente mithilfe von Attributselektoren zu finden, z. B. [value="SEL2"]
Sie müssen jedoch berücksichtigen, dass Attributselektoren im Vergleich zu all diesen anderen Optionen relativ langsam sind.
$("#my_select").val("the_new_value").change();
... ... von so