Wie wähle ich das erste Element in der Dropdown-Liste mit jquery aus?

106

Ich möchte wissen, wie ich mit jquery die erste Option in allen ausgewählten Tags auf meiner Seite auswähle.

versuchte dies:

$('select option:nth(0)').attr("selected", "selected");

Hat aber nicht funktioniert

javascript jquery html

— Amr Elgarhy
quelle

193

Probieren Sie das aus ...

$('select option:first-child').attr("selected", "selected");

Eine andere Option wäre dies, aber es funktioniert jeweils nur für eine Dropdown-Liste, wie unten codiert:

var myDDL = $('myID');
myDDL[0].selectedIndex = 0;

In diesem Beitrag erfahren Sie, wie Sie basierend auf dem Wert festlegen. Er ist interessant, hilft Ihnen jedoch bei diesem speziellen Problem nicht weiter:

Ändern Sie den ausgewählten Wert einer Dropdown-Liste mit jQuery

— RSolberg
quelle

Ändern Sie einfach myID, um auszuwählen, wie ich alle ausgewählten Tags möchte

— Amr Elgarhy

26

Jetzt können Sie in jQuery über die .prop()Methode auf die Eigenschaften zugreifen . So können Sie $("select").prop("selectedIndex",0);schnell die erste Option für alle Dropdowns auswählen.

— CBarr

3

Wissen Sie, ob dies in allen Browsern ein Änderungsereignis auslöst, indem Sie einfach das Attribut festlegen? Es scheint in Chrome, hat es aber nicht ausgiebig getestet. Ich dachte darüber nach, $('select').trigger('change');für alle Fälle einen weiteren hinzuzufügen . Vielen Dank!

— Brian Armstrong

3

var myDDL = $('myID')sollte Hash in der var myDDL = $('#myID')

— Auswahl

1

Diese Methode funktioniert gut für mich:$('select option').first().prop('selected',true);

— Lorenzo Magon

13

Ihr Selektor ist falsch, Sie haben wahrscheinlich gesucht

$('select option:nth-child(1)')

Dies wird auch funktionieren:

$('select option:first-child')

— Aistina
quelle

3

CSS n-Kind-Auswahlindex beginnt bei 1, nicht 0

— Sergey

10

Eine alternative Lösung für RSolgberg, die das 'onchange'Ereignis auslöst, falls vorhanden:

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

Wie kann ich die erste Option von <Auswahl> mit jQuery auswählen?

— Muhammad Omar ElShourbagy
quelle

1

Dies funktioniert besser als die akzeptierte Antwort, wenn Sie die ausgewählte Option mehrmals ändern müssen. ZB wenn Sie Ihre Optionen filtern und einen Teil davon anzeigen.

— Guillaume Renoult

5

$("#DDLID").val( $("#DDLID option:first-child").val() );

Für vollständige Dropdown-Listenoperationen mit Jquery

— Vijay
quelle

Der Link ist jetzt tot.

— Paul Gorbas

4

Was Sie wollen, ist wahrscheinlich:

$("select option:first-child")

Was dieser Code

attr("selected", "selected");

Dabei wird das Attribut "ausgewählt" auf "ausgewählt" gesetzt.

Wenn Sie die ausgewählten Optionen möchten, unabhängig davon, ob es sich um das erste Kind handelt, lautet die Auswahl:

$("select").children("[selected]")

— RichN
quelle

1

Ersetzen Sie attrdurch, propwenn Sie jQuery 1.6+ verwenden

— Jesan Fafon

2

Ich antworte, weil die vorherigen Antworten mit der neuesten Version von jQuery nicht mehr funktionieren. Ich weiß nicht, wann es nicht mehr funktioniert, aber die Dokumentation besagt, dass .prop () seit jQuery 1.6 die bevorzugte Methode zum Abrufen / Festlegen von Eigenschaften ist.

So habe ich es zum Laufen gebracht (mit jQuery 3.2.1):

$('select option:nth-child(1)').prop("selected", true);

Ich verwende Knockoutjs und die Änderungsbindungen wurden nicht mit dem obigen Code ausgelöst, daher habe ich am Ende .change () hinzugefügt.

Folgendes brauchte ich für meine Lösung:

$('select option:nth-child(1)').prop("selected", true).change();

Siehe .prop () - Hinweise in der Dokumentation hier: http://api.jquery.com/prop/

— Brandon
quelle

2

Hier ist eine einfache javascriptLösung, die in den meisten Fällen funktioniert:

document.getElementById("selectId").selectedIndex = "0";

— Jagruti
quelle

1

Wenn Sie den Text der ausgewählten Option überprüfen möchten, unabhängig davon, ob es sich um das erste untergeordnete Element handelt.

var a = $("#select_id option:selected").text();
alert(a); //check if the value is correct.
if(a == "value") {-- execute code --}

— Sarah
quelle

Hat mir eine zweite Suche erspart. Dies ist so ziemlich das, wonach ich gesucht habe, obwohl ich mehr daran interessiert war, den Wert zu ändern als ihn zu überprüfen. $('#myID option:selected').text('NEW STRING');

— Ricky Payne

1

    var arr_select_val=[];

    $("select").each(function() { 
        var name=this.name;
            arr_select_val[name]=$('select option:first-child').val();
    });


// Process the array object
     $('.orders_status_summary_div').print(arr_select_val);

— ShivarajRH
quelle