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

547

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>
Oh mein Gott
quelle

Antworten:

955
$("#target").val($("#target option:first").val());
David Andres
quelle
364
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.
Nicholi
178

Sie können dies versuchen

$("#target").prop("selectedIndex", 0);
Esben
quelle
2
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.
Casey Crookston
6
@Tomasz$("#target").prop("selectedIndex", 0).change();
mplungjan
@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');
user149513
quelle
1
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.
Lance Cleveland
65

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.

Jimmy Huang
quelle
3
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:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");
James Lee Baker
quelle
3
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.
Lance Cleveland
33
$("#target")[0].selectedIndex = 0;
danaktiv
quelle
1
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.

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

Bradley Bossard
quelle
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:

$("#target option:not([disabled]):first").attr('selected','selected')
Melanie
quelle
1
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;

});
Nick Petropoulos
quelle
4
+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')
Ja͢ck
7

So einfach ist das:

$('#target option:first').prop('selected', true);
Ramon Schmidt
quelle
1
das ist viel besser
Arun Prasad ES
7
$('#newType option:first').prop('selected', true);
FFFFFF
quelle
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.

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');
Francis Lewis
quelle
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 ...

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

funktioniert bei mir.

Darth Jon
quelle
5

So würde ich es machen:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');
Fabrizio
quelle
1
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:

$("#target option:first").attr('selected','selected').trigger('change');
Pablo SG Pacheco
quelle
2

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.

Gary - ITB
quelle
2

Das hat bei mir funktioniert!

$("#target").prop("selectedIndex", 0);
Archana Kamath
quelle
1

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');
Matthew Scott
quelle
1

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

Jean Douglas
quelle
1

Verwenden:

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

Die Arbeit finden Sie einfach in dieser JSFiddle .

Chetan
quelle
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

$('#target').val($('#target').find("option:first").val());
Muhammad Qasim
quelle
0
$("#target").val(null);

funktionierte gut in Chrom

Krishna Murthy
quelle
0

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

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

...

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

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

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()); 
Arsman Ahmad
quelle
0

$('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)
Hitesh Kalwani
quelle
-1

Verwenden:

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