Wie verwende ich jQuery, um eine Dropdown-Option auszuwählen?

156

Ich habe mich gefragt, ob es möglich ist, jQuery dazu zu bringen, ein <option>, sagen wir das 4. Element, in einem Dropdown-Feld auszuwählen.

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

Ich möchte, dass der Benutzer auf einen Link klickt und das <select>Feld dann seinen Wert ändert, als hätte der Benutzer ihn durch Klicken auf den Link ausgewählt <option>.

javascript jquery html drop-down-menu html-select dotty
quelle
4
Haben Ihre Optionen einen Wert?
Victor

Antworten:

183

Wie wäre es mit 

$('select>option:eq(3)').attr('selected', true);

Beispiel unter http://www.jsfiddle.net/gaby/CWvwn/

Für moderne Versionen von jquery sollten Sie die .prop()anstelle von verwenden.attr()

$('select>option:eq(3)').prop('selected', true);

Beispiel unter http://jsfiddle.net/gaby/CWvwn/1763/

Gabriele Petrioli
quelle
3
imo sollte das nicht mal funktionieren; Der ausgewählte Status einer Option sollte ausgelöst werden, indem stattdessen der Status der Auswahl selbst
geändert wird
1
selectElement.selectedIndex = index;ist was Jack meint.
Rlemon
@rlemon, ich verstehe, selectedIndexkann aber nicht für die Mehrfachauswahl verwendet werden, wenn das multipleAttribut verwendet wird. Die normale ( HTML ) Methode zum Festlegen ausgewählter Elemente ist das selectedAttribut der optionElemente.
Gabriele Petrioli
@ GabyakaG.Petrioli Der normale Weg besteht darin, die selectedEigenschaft jedes entsprechenden optionsElements auf true(und optional den Rest falseexplizit auf) zu setzen. Mehrfachauswahl ist eigentlich ziemlich böse :)
Ja͢ck
6
@sunnyiitkgp Das onchangeEreignis wird niemals ausgelöst, wenn der Wert programmgesteuert geändert wird. Sie können .trigger('change')am Ende ein hinzufügen, um auch das Ereignis auszulösen ( obwohl es
ausgelöst
149

Die Lösung:

$("#element-id").val('the value of the option');
Harold Sota
quelle
2
Die selectedOption wird im HTML nicht festgelegt .
Ahmad Hamza
54

HTML-Auswahlelemente haben eine selectedIndexEigenschaft, in die geschrieben werden kann, um eine bestimmte Option auszuwählen:

$('select').prop('selectedIndex', 3); // select 4th option

Mit einfachem JavaScript kann dies erreicht werden durch:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;
Jack
quelle
7
Dies sollte die akzeptierte Antwort sein ... Es sieht aus wie die vernünftigste und sauberste Lösung ...
Denys Séguret
1
Das Problem ist, dass es kein "onchange" -Ereignis auslöst.
Guy Korland
2
@GuyKorland Dies geschieht auch mit keiner der anderen hier gezeigten Antworten . Wenn Sie möchten, dass ein Ereignis ausgelöst wird, müssen Sie dies manuell tun.
Ja͢ck
1
@ Jack Gibt es einen kurzen Weg? Der einzige Weg, den ich gefunden habe: var fireEvent = function (selectElement) {if (selectElement) {if ("fireEvent" in selectElement) {selectElement.fireEvent ("onchange"); } else {var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("change", false, true); selectElement.dispatchEvent (evt); }}}
Guy Korland
4
@GuyKorland jQuery stellt dies .trigger()zur Verfügung, aber da Sie dies bereits mit Code tun, ist es einfach, die Änderungshandler auch selbst aufzurufen.
Ja͢ck
30

Ich würde es so machen

 $("#idElement").val('optionValue').trigger('change');
Franzisk
quelle
3
Dies sollte die ausgewählte Antwort sein
Uzumaki Naruto
2
$ ("# idElement"). val ('optionValue'). change () könnte auch funktionieren
Ullullu
23

Wenn Ihre Optionen einen Wert haben, können Sie dies tun:

$('select').val("the-value-of-the-option-you-want-to-select");

'select' ist die ID Ihrer Auswahl oder einer Klassenauswahl. oder wenn es nur eine Auswahl gibt, können Sie das Tag wie im Beispiel verwenden.

Sieger
quelle
2
Genau das brauchte ich. Vielen Dank.
chapman84
23

Der einfachste Weg ist die val(value)Funktion:

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

Und um den ausgewählten Wert zu erhalten, geben Sie keine Argumente an:

$('select').val();

Wenn Sie haben <option value="valueToSelect">...</option>, können Sie auch Folgendes tun:

$('select').val("valueToSelect");

DEMO

Ionică Bizău
quelle
Funktionierte auch $ ('# SelectCtrlId'). Val ('ValueToSelect');
Sai
9

Verwenden Sie den folgenden Code, wenn Sie eine Option mit einem bestimmten Wert auswählen möchten:

$('select>option[value="' + value + '"]').prop('selected', true);
nlareu
quelle
$ ('select'). val (Wert); Warum so ernst? ;)
Zeeshan
1
@Zee Der beantwortete Code erlaubt auch Mehrfachauswahl.
Azghanvi
5 
 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);
Mamun Rasid
quelle
3

Ich bevorzuge nth-child () gegenüber eq (), da es eine 1-basierte Indizierung anstelle einer 0-basierten verwendet, was für mein Gehirn etwas einfacher ist.

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);
Lee D.
quelle
Der "1-basierte Index" ist besser, wenn Dinge mit Datumsangaben bearbeitet werden. Rettet mich vor vielen Problemen. Vielen Dank.
TCB13
3

Bei '' element verwenden wir normalerweise das Attribut 'value'. Das Einstellen wird dann einfacher:

$('select').val('option-value');
Savaratkar
quelle
3

Versuche dies:

$('#mySelectElement option')[0].selected = true;

Grüße!

Nicolas Finelli
quelle
2

antworte mit id:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);
Javad Masoumi
quelle
1 
 $('select>option:eq(3)').attr('selected', 'selected');

Eine Einschränkung hier ist, wenn Sie Javascript haben, um nach dem Änderungsereignis von select / option zu suchen .trigger('change'), das Sie hinzufügen müssen, damit der Code wird.

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

weil nur ein Aufruf .attr('selected', 'selected')das Ereignis nicht auslöst

kanitw
quelle