Bagaimana cara memilih elemen pertama di dropdown menggunakan jquery?

106

Saya ingin tahu cara memilih opsi pertama di semua tag pilih di halaman saya menggunakan jquery.

mencoba ini:

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

Tapi tidak berhasil

Amr Elgarhy
sumber

Jawaban:

193

Coba ini ...

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

Opsi lain adalah ini, tetapi ini hanya akan berfungsi untuk satu daftar drop-down pada satu waktu seperti yang dikodekan di bawah ini:

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

Lihatlah posting ini tentang cara mengatur berdasarkan nilai, itu menarik tetapi tidak akan membantu Anda untuk masalah khusus ini:

Ubah nilai yang dipilih dari daftar drop-down dengan jQuery

RSolberg
sumber
cukup ubah myID untuk memilih karena saya ingin semua tag pilih
Amr Elgarhy
26
sekarang di jQuery Anda dapat mengakses properti melalui .prop()metode. Jadi, Anda dapat menggunakan $("select").prop("selectedIndex",0);cara cepat untuk memilih opsi pertama di semua dropdown.
CBarr
3
Tahukah Anda jika ini akan memicu peristiwa 'perubahan' di semua browser hanya dengan menyetel atribut? Tampaknya di Chrome, tetapi belum mengujinya secara ekstensif. Saya sedang berpikir untuk menambahkan yang lain untuk $('select').trigger('change');berjaga-jaga. Terima kasih!
Brian Armstrong
3
var myDDL = $('myID')harus memiliki hash di pemilih menjadivar myDDL = $('#myID')
user1069816
1
Metode ini bekerja dengan baik untuk saya:$('select option').first().prop('selected',true);
Lorenzo Magon
13

Selektor Anda salah, Anda mungkin mencari

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

Ini juga akan bekerja:

$('select option:first-child')
Aistina
sumber
3
Indeks pemilih anak ke-n CSS dimulai pada 1, bukan 0
Sergey
10

Solusi alternatif Ana untuk RSolgberg, yang mengaktifkan 'onchange'acara jika ada:

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

Bagaimana cara membuat opsi pertama <pilih> dipilih dengan jQuery?

Muhammad Omar ElShourbagy
sumber
1
Ini bekerja lebih baik daripada jawaban yang diterima jika Anda harus mengubah opsi yang dipilih beberapa kali. Misalnya jika Anda memfilter opsi Anda dan menampilkan sebagian darinya.
Guillaume Renoult
4

Apa yang Anda inginkan mungkin:

$("select option:first-child")

Apa kode ini

attr("selected", "selected");

yang dilakukan adalah menyetel atribut "dipilih" menjadi "dipilih"

Jika Anda menginginkan opsi yang dipilih, terlepas dari apakah itu anak pertama, selektornya adalah:

$("select").children("[selected]")
RichN
sumber
1
Ganti attrdengan propjika Anda menggunakan jQuery 1.6+
Jesan Fafon
2

Saya menjawab karena jawaban sebelumnya telah berhenti berfungsi dengan versi terbaru jQuery. Saya tidak tahu kapan itu berhenti bekerja, tetapi dokumentasinya mengatakan bahwa .prop () telah menjadi metode yang disukai untuk mendapatkan / mengatur properti sejak jQuery 1.6.

Beginilah cara saya membuatnya berfungsi (dengan jQuery 3.2.1):

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

Saya menggunakan knockoutjs dan perubahan binding tidak diaktifkan dengan kode di atas, jadi saya menambahkan .change () di akhir.

Inilah yang saya butuhkan untuk solusi saya:

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

Lihat catatan .prop () dalam dokumentasi di sini: http://api.jquery.com/prop/

Brandon
sumber
2

Berikut ini javascriptsolusi sederhana yang berfungsi dalam banyak kasus:

document.getElementById("selectId").selectedIndex = "0";
Jagruti
sumber
1

jika Anda ingin memeriksa teks dari opsi yang dipilih terlepas dari apakah itu anak pertama.

var a = $("#select_id option:selected").text();
alert(a); //check if the value is correct.
if(a == "value") {-- execute code --}
sarah
sumber
Menyelamatkan saya untuk pencarian kedua. Ini cukup banyak yang saya cari, meskipun saya lebih tertarik untuk mengubah nilainya daripada memeriksanya. $('#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
sumber