Wie kann die erste Option von mit jQuery ausgewählt werden?

Wie mache ich die erste Option von mit jQuery ausgewählt?

 ... ...  

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

Du kannst es 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.

Wenn Sie den Wert der Auswahleingabe ändern oder das ausgewählte Attribut anpassen, kann die standardmäßige selectedOptions -Eigenschaft des DOM-Elements überschrieben werden, was zu einem Element führt, das möglicherweise nicht ordnungsgemäß in einem Formular zurückgesetzt wird, bei dem das Ereignis reset aufgerufen wurde.

Verwenden Sie die prop-Methode 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 , den ich über die meistgewählten Antworten herausgefunden habe, ist, dass sie zwar den ausgewählten Wert korrekt ändern, aber das Element, das der Benutzer sieht, nicht aktualisieren (nur wenn sie auf das Widget klicken, sehen sie ein Häkchen neben dem aktuelles Element).

Durch Verkettung eines .change () – Aufrufs an das Ende 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, daher ist dies möglicherweise nicht überall der Fall).

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

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

Eine andere Möglichkeit, die Werte (für mehrere ausgewählte Elemente) zurückzusetzen, könnte folgende 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; }); 

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

Einfach so:

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

Ich habe festgestellt, dass die Einstellung nur attr ausgewählt nicht funktioniert, wenn bereits ein Attribut ausgewählt ist. Der Code, den ich jetzt verwende, wird zuerst das ausgewählte Attribut aufheben und dann die erste Option auswählen.

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

Hier ist, wie ich es machen würde:

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

Obwohl die einzelnen functionen wahrscheinlich nicht notwendig sind …

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

funktioniert bei mir.

Wenn Sie die erste Option als Standard verwenden möchten

  

dann kannst du einfach benutzen:

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

Es ist schön und einfach.

Benutzen:

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

In diesem JSFiddle finden Sie die Arbeit einfach.

Auf der Rückseite von James Lee Bakers Antwort bevorzuge ich diese Lösung, da es die Abhängigkeit von der Browser-Unterstützung für: erstens: ausgewählte …

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

Es funktionierte nur für mich mit einem Trigger (‘ändern’) am Ende, wie folgt:

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

Für mich funktionierte es nur, als ich den folgenden Code hinzufügte:

.change();

Für mich funktionierte es nur, als ich den folgenden Code hinzufügte: Da ich das Formular “zurücksetzen” wollte, dh alle ersten Optionen aller Selects des Formulars auswählte, verwendete ich den folgenden Code:

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

 $("#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()); 

Benutzen:

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

Ü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()); }); 

Für mich funktionierte es nur, wenn ich die folgende Codezeile hinzufügte

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

Sie können eine beliebige Option aus dem dropdown auswählen, indem Sie sie verwenden.

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