Jak wybrać pierwszy element z listy za pomocą jQuery?

106

Chcę wiedzieć, jak wybrać pierwszą opcję we wszystkich tagach select na mojej stronie za pomocą jquery.

próbował tego:

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

Ale nie zadziałało

Amr Elgarhy
źródło

Odpowiedzi:

193

Wypróbuj to ...

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

Inną opcją byłoby to, ale będzie działać tylko dla jednej listy rozwijanej naraz, jak zakodowano poniżej:

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

Spójrz na ten post, jak ustawić na podstawie wartości, jest interesujący, ale nie pomoże ci w tym konkretnym problemie:

Zmień wybraną wartość listy rozwijanej za pomocą jQuery

RSolberg
źródło
po prostu zmień myID, aby wybrać tak, jak chcę, wszystkie
zaznaczone
26
teraz w jQuery możesz uzyskać dostęp do właściwości za pomocą .prop()metody. Możesz więc skorzystać $("select").prop("selectedIndex",0);z szybkiego sposobu, aby wybrać pierwszą opcję ze wszystkich menu rozwijanych.
CBarr
3
Czy wiesz, czy spowoduje to zdarzenie „zmiany” we wszystkich przeglądarkach po prostu przez ustawienie atrybutu? Wydaje się, że działa w Chrome, ale nie testowałem go szczegółowo. Myślałem o dodaniu kolejnego na $('select').trigger('change');wszelki wypadek. Dzięki!
Brian Armstrong,
3
var myDDL = $('myID')powinien mieć hash w selektorze, aby stać sięvar myDDL = $('#myID')
user1069816
1
Ta metoda działa dobrze dla mnie:$('select option').first().prop('selected',true);
Lorenzo Magon
13

Twój selektor jest zły, prawdopodobnie szukałeś

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

To zadziała również:

$('select option:first-child')
Aistina
źródło
3
Indeks selektora n-tego dziecka w CSS zaczyna się od 1, a nie od 0
Sergey
10

Alternatywne rozwiązanie dla RSolgberg, które uruchamia 'onchange'zdarzenie, jeśli jest obecne:

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

Jak zrobić pierwszą opcję <select> wybraną z jQuery?

Muhammad Omar ElShourbagy
źródło
1
Działa to lepiej niż zaakceptowana odpowiedź, jeśli musisz wielokrotnie zmieniać wybraną opcję. Np. Jeśli filtrujesz opcje i wyświetlasz ich część.
Guillaume Renoult
4

Prawdopodobnie chcesz:

$("select option:first-child")

Co to za kod

attr("selected", "selected");

polega na ustawianiu atrybutu „selected” na „selected”

Jeśli chcesz wybrać wybrane opcje, niezależnie od tego, czy jest to pierwsze dziecko, selektor jest:

$("select").children("[selected]")
RichN
źródło
1
Wymienić attrze propjeśli używasz jQuery 1.6 +
Jesan Fafon
2

Odpowiadam, ponieważ poprzednie odpowiedzi przestały działać w najnowszej wersji jQuery. Nie wiem, kiedy przestało działać, ale dokumentacja mówi, że .prop () była preferowaną metodą pobierania / ustawiania właściwości od jQuery 1.6.

Oto jak to działa (z jQuery 3.2.1):

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

Używam knockoutjs i powiązania zmiany nie były uruchamiane z powyższym kodem, więc dodałem .change () na końcu.

Oto, czego potrzebowałem do mojego rozwiązania:

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

Zobacz uwagi .prop () w dokumentacji tutaj: http://api.jquery.com/prop/

Brandon
źródło
2

Oto proste javascriptrozwiązanie, które działa w większości przypadków:

document.getElementById("selectId").selectedIndex = "0";
Jagruti
źródło
1

jeśli chcesz sprawdzić tekst wybranej opcji, niezależnie czy jest to pierwsze dziecko.

var a = $("#select_id option:selected").text();
alert(a); //check if the value is correct.
if(a == "value") {-- execute code --}
Sarah
źródło
Zapisano mi drugie wyszukiwanie. Dokładnie tego szukałem, chociaż bardziej interesowała mnie zmiana wartości niż jej sprawdzanie. $('#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
źródło