Es sollte beachtet werden, dass dies mit $ ("# target") [0] .selectedIndex = 0 einfacher ist.
David Andres
17
Es funktioniert, aber es basiert auf dem Wert des 1. Elements . Wenn das 1. Element einen leeren Wert enthält, wählt es das nächste Element MIT Wert aus
evilReiko
2
Scheint großartig zu funktionieren, außer für IE6. Unsicher von 7-8, arbeitet am 9.
Nicholi
3
Ich widerrufe meine vorherige Aussage, war mir selbst voraus. $ ("# target"). val ("option: first"); funktioniert fast überall außer IE6 $ ("Ziel"). val ($ ("# Zieloption: zuerst"). val ()); funktioniert in IE6, da Sie buchstäblich nach dem ersten Wert suchen und ihn als Zielwert eingeben. Zwei ID-Lookups anstelle von einem.
Nicholi
2
Und es ist tatsächlich für IE6, 7 und 8 erforderlich. Während .val ('Option: first') in IE9 (und Safari und Firefox sowie Chrome und Opera) funktioniert.
Dies funktioniert nicht in allen Fällen ordnungsgemäß. Ich habe ein Eltern / Kind, das Dropdowns kaskadiert. Wählen Sie Elternteil Nr. 1 aus, zeigen Sie Kind Nr. 1 an, wählen Sie Elternteil Nr. 2 aus und zeigen Sie Kind Nr. 2 an. Jedes Mal, wenn sie ein neues Elternteil auswählen, sollte das entsprechende Kind auf die erste Option zurückgesetzt werden. Diese Lösung macht das nicht. Das untergeordnete Menü bleibt "klebrig". Die Antwort, die in mehr Szenarien funktioniert, finden Sie in der Option: selected.prop ('selected', false) / option: first.prop ('selected', 'selected') für diese Frage.
Lance Cleveland
Dies löst kein onChange-Ereignis aus. Zumindest in Chrom.
Tomasz Mularczyk
Vielen Dank! Dies ist die erste Antwort in der Liste der Antworten, die für mich funktioniert haben.
@Romesh Wie kann ich selectedIndex als Basis für den Wert festlegen?
Junior Frogie
111
// 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');
Guter zweiter Ansatz. Bitte addieren Sie den Wert des ausgewählten Attributs. Zum Beispiel attr ("ausgewählt", "ausgewählt"). Ohne diesen zusätzlichen Parameter wird die Auswahl nicht getroffen.
David Andres
@EgorPavlikhin - Ich habe gerade die Antwort so bearbeitet, dass sie JQuery-Code enthält, um das Flag "Ausgewählt" aus allen Optionen zu entfernen, die möglicherweise bereits ausgewählt wurden. Jetzt ist die Antwort richtig :)
jmort253
20
Es besteht keine Notwendigkeit für die eachFunktion, sollte sein: sollte $('#target option[selected="selected"]').removeAttr('selected')auch jetzt mit removePropund propstattdessen verwendet werden.
vsync
Eine gründlichere Version von James Lee Bakers Antwort an anderer Stelle auf diese Frage fügt jedoch Rechenzyklen hinzu, die möglicherweise nicht erforderlich sind, wenn die Schnittstelle gut verwaltet wird.
Sie müssen auch alle zuvor ausgewählten Elemente "abwählen", damit dies in mehr Fällen funktioniert. Siehe die Antwort von James Lee Baker für Details.
Lance Cleveland
44
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:
Perfekt. Ich habe kaskadierende Dropdown-Menüs. Wenn ein Benutzer die übergeordnete Option 2 und dann die untergeordnete Option 3 auswählt, möchte ich nicht, dass dies "bleibt". Mit anderen Worten, der Benutzer wählt dann Elternteil Nr. 1 aus und wählt dann Elternteil Nr. 2 erneut aus. In diesem Fall soll das untergeordnete Menü auf die erste Option zurückgesetzt werden (in meinem Fall "Beliebig"). Alle anderen Lösungen hier schlagen unter Firefox v19 und Chrome unter Linux fehl.
Dies funktioniert nicht in Fällen, in denen ein Dropdown-Menü ein vorgewähltes Element enthält. Siehe meine Kommentare zur ausgewählten Antwort für Details.
Lance Cleveland
21
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.
(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 einen .change () -Aufruf an das Ende verketten, wird auch das UI-Widget aktualisiert.
Codemirror
17
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:
Guter Punkt zu deaktivierten Optionen. Schöne Ergänzung zu den vorgestellten Antworten!
Lance Cleveland
16
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;});
+1 ist eigentlich eine gute Antwort, aber Sie hätten es spezifischer für die Fragendomäne machen können; stattdessen $("selector")hättest du einfach schreiben können$('#target')
Dies funktioniert nur, wenn noch keine Optionen ausgewählt sind. Siehe James Lee Bakers Antwort.
Webars
6
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.
Dies funktioniert gut und ist der Antwort von James Lee Baker, die an anderer Stelle zu dieser Frage erwähnt wurde, sehr ähnlich. Ich mag die andere Antwort mit Option: ausgewählt und Option: zuerst als Ausführung von Option: zuerst ist wahrscheinlich schneller (rechnerisch) als find ().
Lance Cleveland
5
Obwohl jede Funktion wahrscheinlich nicht notwendig ist ...
Dies funktioniert gut und ist der Antwort von James Lee Baker, die an anderer Stelle zu dieser Frage erwähnt wurde, sehr ähnlich. Ich mag die andere Antwort mit Option: ausgewählt und Option: zuerst als Ausführung von Option: zuerst ist wahrscheinlich schneller (rechnerisch) als find ().
Lance Cleveland
2
Es hat bei mir nur mit einem Trigger ('change') am Ende so funktioniert:
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 ...
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:
Wie wäre es mit Position 15, 25 oder mit einem bestimmten Text? : D
Marcelo Agimóvel
Beim Aufrufen wird .val()nur der Wert der ersten Option in der Liste abgerufen. Die erste Option wird nicht ausgewählt (ausgewählt), wie in der ursprünglichen Frage gestellt.
Funka
1
Bei mir hat es nur funktioniert, wenn ich die folgende Codezeile hinzugefügt habe
Sie können dies versuchen
quelle
$("#target").prop("selectedIndex", 0).change();
quelle
each
Funktion, sollte sein: sollte$('#target option[selected="selected"]').removeAttr('selected')
auch jetzt mitremoveProp
undprop
stattdessen verwendet werden.Wenn Sie verwenden
Dies funktioniert in Chrome und Safari nicht, wenn der erste Optionswert null ist.
ich bevorzuge
weil es in allen Browsern funktionieren kann.
quelle
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:
quelle
quelle
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.
(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.)
quelle
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:
quelle
Eine andere Möglichkeit zum Zurücksetzen der Werte (für mehrere ausgewählte Elemente) könnte sein:
quelle
$("selector")
hättest du einfach schreiben können$('#target')
So einfach ist das:
quelle
quelle
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.
quelle
Obwohl jede Funktion wahrscheinlich nicht notwendig ist ...
funktioniert bei mir.
quelle
So würde ich es machen:
quelle
Es hat bei mir nur mit einem Trigger ('change') am Ende so funktioniert:
quelle
Wenn Sie die erste Option als Standard verwenden möchten, wie
dann können Sie einfach verwenden:
Es ist schön und einfach.
quelle
Das hat bei mir funktioniert!
quelle
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 ...
quelle
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(); });
quelle
Verwenden:
Die Arbeit finden Sie einfach in dieser JSFiddle .
quelle
.val()
nur der Wert der ersten Option in der Liste abgerufen. Die erste Option wird nicht ausgewählt (ausgewählt), wie in der ursprünglichen Frage gestellt.Bei mir hat es nur funktioniert, wenn ich die folgende Codezeile hinzugefügt habe
quelle
funktionierte gut in Chrom
quelle
Wenn Sie das jQuery-Objekt des select-Elements speichern:
quelle
Überprüfen Sie diesen besten Ansatz mit jQuery mit ECMAScript 6 :
quelle
Sie können eine beliebige Option auswählen,
dropdown
indem Sie sie verwenden.quelle
$('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
Hier verwende ich für die Auswahl der ersten Elemente den folgenden Code:
quelle
Verwenden:
quelle