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

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