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

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>.

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/

Die Lösung:

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

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;

Ich würde es so machen

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

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.

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

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

$('select>option[value="' + value + '"]').prop('selected', true);

 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);

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);

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

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

Versuche dies:

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

Grüße!

antworte mit id:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

 $('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