Bagaimana cara menggunakan jQuery untuk memilih opsi dropdown?

157

Saya bertanya-tanya apakah mungkin untuk mendapatkan jQuery untuk memilih <option>, katakanlah item ke-4, di kotak dropdown?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

Saya ingin pengguna mengklik tautan, lalu minta <select>kotak itu mengubah nilainya, seolah-olah pengguna telah memilihnya dengan mengeklik tautan <option>.

Dotty
sumber
4
apakah opsi Anda memiliki nilai?
Victor

Jawaban:

184

Bagaimana tentang

$('select>option:eq(3)').attr('selected', true);

contoh di http://www.jsfiddle.net/gaby/CWvwn/


untuk versi jquery modern, Anda harus menggunakan .prop()alih - alih.attr()

$('select>option:eq(3)').prop('selected', true);

contoh di http://jsfiddle.net/gaby/CWvwn/1763/

Gabriele Petrioli
sumber
3
karena ini seharusnya tidak berfungsi; keadaan pilihan yang dipilih harus dipicu dengan mengubah keadaan pemilihan itu sendiri :)
Ja͢ck
1
selectElement.selectedIndex = index;itulah yang dimaksud Jack.
rlemon
@ rlemon, saya mengerti, tetapi selectedIndextidak dapat digunakan untuk beberapa pilihan saat multipleatribut digunakan. Dan cara normal ( html ) untuk mengatur elemen yang dipilih adalah selectedatribut optionelemen.
Gabriele Petrioli
@ GabyakaG.Petrioli Cara normal sebenarnya adalah mengatur selectedproperti masing-masing optionselemen yang sesuai true(dan secara opsional sisanya untuk falsesecara eksplisit). Banyak pilihan sebenarnya tidak menyenangkan :)
Ja 31ck
6
@sunnyiitkgp onchangeacara tidak pernah dipicu saat nilainya diubah secara terprogram. Anda dapat menambahkan .trigger('change')di akhir untuk juga memecat acara ( meskipun itu akan memecat terlepas dari nilai yang sebenarnya telah berubah )
Gabriele Petrioli
149

Solusinya:

$("#element-id").val('the value of the option');
Harold Sota
sumber
2
itu tidak mengatur selectedopsi dalam HTML.
Ahmad hamza
54

Elemen pilih HTML memiliki selectedIndexproperti yang dapat ditulis untuk memilih opsi tertentu:

$('select').prop('selectedIndex', 3); // select 4th option

Dengan menggunakan JavaScript biasa, ini dapat dicapai dengan:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;
Mendongkrak
sumber
7
Ini harus menjadi jawaban yang diterima ... Sepertinya solusi paling bersih dan
sehat
1
Masalahnya adalah itu tidak memunculkan acara 'onchange'.
Guy Korland
2
@GuyKorland Ini terjadi dengan tidak ada jawaban lain, ditunjukkan di sini ; jika Anda ingin acara memecat, Anda harus melakukannya secara manual.
Ja͢ck
1
@ Jack Apakah ada jalan pintas? Satu-satunya cara saya menemukan: var fireEvent = fungsi (selectElement) {if (selectElement) {if ("fireEvent" di selectElement) {selectElement.fireEvent ("onchange"); } else {var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("ubah", salah, benar); selectElement.dispatchEvent (evt); }}}
Guy Korland
4
@GuyKorland jQuery mengekspos .trigger()untuk itu, tetapi karena Anda sudah melakukan ini dengan kode itu akan mudah juga memanggil penangan perubahan sendiri.
Ja͢ck
30

Saya akan melakukannya dengan cara ini

 $("#idElement").val('optionValue').trigger('change');
Franzisk
sumber
3
ini seharusnya jawaban yang dipilih
Uzumaki Naruto
2
$ ("# idElement"). val ('optionValue'). change () juga bisa bekerja
Ullullu
24

jika opsi Anda memiliki nilai, Anda dapat melakukan ini:

$('select').val("the-value-of-the-option-you-want-to-select");

'select' akan menjadi id pilih Anda atau pemilih kelas. atau jika hanya ada satu pilih, Anda dapat menggunakan tag seperti pada contoh.

Pemenang
sumber
2
Itulah yang saya butuhkan. Terima kasih.
chapman84
23

Cara termudah adalah val(value)fungsi:

$('select').val(2);

Dan untuk mendapatkan nilai yang dipilih Anda tidak memberikan argumen:

$('select').val();

Juga, Anda jika Anda punya <option value="valueToSelect">...</option>, Anda dapat melakukan:

$('select').val("valueToSelect");

DEMO

Ionică Bizău
sumber
Juga bekerja $ ('# SelectCtrlId'). Val ('ValueToSelect');
Sai
9

Gunakan kode berikut jika Anda ingin memilih opsi dengan nilai tertentu:

$('select>option[value="' + value + '"]').prop('selected', true);
nlareu
sumber
$ ('pilih'). val (nilai); Mengapa serius sekali? ;)
Zeeshan
1
@ Zee Kode yang dijawab memungkinkan beberapa pilihan juga.
Azghanvi
5
 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);
Mamun Rasid
sumber
3

Saya lebih suka nth-child () daripada eq () karena menggunakan pengindeksan berbasis 1 daripada berbasis 0, yang sedikit lebih mudah di otak saya.

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);
Lee D
sumber
"Indeks berbasis 1" lebih baik ketika memanipulasi hal-hal dengan tanggal. Menghemat saya dari banyak masalah. Terima kasih.
TCB13
3

Dengan elemen '' biasanya kita menggunakan atribut 'nilai'. Ini akan membuatnya lebih mudah untuk diatur:

$('select').val('option-value');
Savaratkar
sumber
3

Coba ini:

$('#mySelectElement option')[0].selected = true;

Salam!

Nicolas Finelli
sumber
2

jawab dengan id:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);
Javad Masoumi
sumber
1
 $('select>option:eq(3)').attr('selected', 'selected');

Satu peringatan di sini adalah jika Anda memiliki javascript menonton untuk acara perubahan pilih / opsi Anda perlu menambahkan .trigger('change')sehingga kode menjadi.

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

karena hanya menelepon .attr('selected', 'selected')tidak memicu acara

kanitw
sumber