wake-up-neo.com

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

Ich habe mich gefragt, ob es möglich ist, jQuery zur Auswahl eines <option>, sagen Sie das 4. Element in einer Dropdown-Box?

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

Ich möchte, dass der Benutzer auf einen Link klickt und dann das <select> ändern Sie den Wert, als hätte der Benutzer ihn ausgewählt, indem Sie auf <option>.

javascriptjqueryhtmldrop-down-menuhtml-select
144
dotty

Wie wäre es mit

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

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

für moderne jquery-Versionen sollten Sie .prop() anstelle von .attr() verwenden.

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

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

174
Gabriele Petrioli

Die Lösung:

$("#element-id").val('the value of the option');
142
Harold SOTA

HTML-Auswahlelemente haben eine selectedIndex -Eigenschaft, 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;
51
Ja͢ck

Der einfachste Weg ist val(value) function:

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

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

$('select').val();

Außerdem können Sie mit <option value="valueToSelect">...</option> Folgendes tun:

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

[~ # ~] Demo [~ # ~]

22
Ionică Bizău

Ich würde es so machen

 $("#idElement").val('optionValue').trigger('change');
21
franzisk

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 eines Klassenselektors. Wenn es nur eine Auswahl gibt, können Sie das Tag wie im Beispiel verwenden.

20
Victor

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

$('select>option[value="' + value + '"]').prop('selected', true);
8
nlareu
 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);
3
Mamun Rasid

Versuche dies:

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

Grüße!

3
Nicolas Finelli

Bei '' Elementen verwenden wir normalerweise das Attribut 'value'. Dies erleichtert das Einstellen von:

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

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

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);
3
Lee D

antworte mit id:

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

Eine Einschränkung hierbei ist, dass Sie, wenn Sie JavaScript für das Änderungsereignis von select/option verwenden, .trigger('change') hinzufügen müssen, damit der Code erstellt wird.

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

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

1
kanitw