So stellen Sie die erste Option von <Auswahl> mit jQuery aus

Wie kann ich die erste Option auswählen, die mit jQuery ausgewählt wurde?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

$("#target").val($("#target option:first").val());

Sie können dies versuchen

$("#target").prop("selectedIndex", 0);

// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');

Wenn Sie verwenden

$("#target").val($("#target option:first").val());

Dies funktioniert in Chrome und Safari nicht, wenn der erste Optionswert null ist.

ich bevorzuge

$("#target option:first").attr('selected','selected');

weil es in allen Browsern funktionieren kann.

Durch Ändern des Werts der Auswahleingabe oder Anpassen des ausgewählten Attributs kann die Standardeigenschaft selectedOptions des DOM-Elements überschrieben werden. Dies führt dazu, dass ein Element in einer Form, in der das Rücksetzereignis aufgerufen wurde, möglicherweise nicht ordnungsgemäß zurückgesetzt wird.

Verwenden Sie die Requisitenmethode von jQuery, um die erforderliche Option zu löschen und festzulegen:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");

$("#target")[0].selectedIndex = 0;

Ein subtiler Punkt, denke ich ich bei den Antworten mit der höchsten Bewertung entdeckt habe, ist, dass sie den ausgewählten Wert nicht aktualisieren, obwohl sie den ausgewählten Wert korrekt ändern (nur wenn sie auf das Widget klicken, wird ein Häkchen neben dem angezeigt aktualisiertes Element).

Wenn Sie einen .change () -Aufruf an das Ende verketten, wird auch das UI-Widget aktualisiert.

$("#target").val($("#target option:first").val()).change();

(Beachten Sie, dass ich dies bei der Verwendung von jQuery Mobile und einer Box auf dem Chrome-Desktop bemerkt habe, sodass dies möglicherweise nicht überall der Fall ist.)

Wenn Sie Optionen deaktiviert haben, können Sie nicht ([deaktiviert]) hinzufügen , um zu verhindern, dass diese ausgewählt werden. Dies führt zu folgenden Ergebnissen:

$("#target option:not([disabled]):first").attr('selected','selected')

Eine andere Möglichkeit zum Zurücksetzen der Werte (für mehrere ausgewählte Elemente) könnte sein:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});

So einfach ist das:

$('#target option:first').prop('selected', true);

$('#newType option:first').prop('selected', true);

Ich habe festgestellt, dass das Einstellen von attr selected nicht funktioniert, wenn bereits ein ausgewähltes Attribut vorhanden ist. Der Code, den ich jetzt verwende, hebt zuerst das ausgewählte Attribut auf und wählt dann die erste Option aus.

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');

Obwohl jede Funktion wahrscheinlich nicht notwendig ist ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

funktioniert bei mir.

So würde ich es machen:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

Es hat bei mir nur mit einem Trigger ('change') am Ende so funktioniert:

$("#target option:first").attr('selected','selected').trigger('change');

Wenn Sie die erste Option als Standard verwenden möchten, wie

<select>
    <option value="">Please select an option below</option>
    ...

dann können Sie einfach verwenden:

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

Es ist schön und einfach.

Das hat bei mir funktioniert!

$("#target").prop("selectedIndex", 0);

Auf der Rückseite von James Lee Bakers Antwort bevorzuge ich diese Lösung, da sie die Abhängigkeit von der Browserunterstützung für Folgendes beseitigt: first: selected ...

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');

Bei mir hat es nur funktioniert, als ich den folgenden Code hinzugefügt habe:

.change();

Bei mir hat es nur funktioniert, wenn ich den folgenden Code hinzugefügt habe: Da ich das Formular "zurücksetzen" wollte, dh alle ersten Optionen aller Auswahlen des Formulars auswählen wollte, habe ich den folgenden Code verwendet:

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

Verwenden:

$("#selectbox option:first").val()

Die Arbeit finden Sie einfach in dieser JSFiddle .

Bei mir hat es nur funktioniert, wenn ich die folgende Codezeile hinzugefügt habe

$('#target').val($('#target').find("option:first").val());

$("#target").val(null);

funktionierte gut in Chrom

Wenn Sie das jQuery-Objekt des select-Elements speichern:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());

Überprüfen Sie diesen besten Ansatz mit jQuery mit ECMAScript 6 :

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});

Sie können eine beliebige Option auswählen, dropdownindem Sie sie verwenden.

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val()); 

$('select#id').val($('#id option')[index].value)

Ersetzen Sie die ID durch eine bestimmte Select-Tag-ID und einen bestimmten Index durch ein bestimmtes Element, das Sie auswählen möchten.

dh

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

Hier verwende ich für die Auswahl der ersten Elemente den folgenden Code:

$('select#ddlState').val($('#ddlState option')[0].value)

Verwenden:

alert($( "#target option:first" ).text());