Ada sejumlah cara untuk melakukan ini, tetapi pendekatan terbersih telah hilang di antara jawaban teratas dan banyak argumen val()
. Juga beberapa metode berubah pada jQuery 1.6, jadi ini membutuhkan pembaruan.
Untuk contoh-contoh berikut, saya akan menganggap variabel $select
adalah objek jQuery yang menunjuk pada <select>
tag yang diinginkan , misalnya melalui yang berikut:
var $select = $('.selDiv .opts');
Catatan 1 - gunakan val () untuk kecocokan nilai:
Untuk pencocokan nilai, menggunakan val()
jauh lebih sederhana daripada menggunakan pemilih atribut: https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
Versi setter .val()
diterapkan pada select
tag dengan mengatur selected
properti yang cocok option
dengan yang sama value
, jadi berfungsi dengan baik di semua browser modern.
Catatan 2 - gunakan properti ('terpilih', benar):
Jika Anda ingin mengatur keadaan opsi yang dipilih secara langsung, Anda dapat menggunakan prop
(bukan attr
) dengan boolean
parameter (daripada nilai teks selected
):
mis. https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tag
Catatan 3 - memungkinkan untuk nilai yang tidak diketahui:
Jika Anda menggunakan val()
untuk memilih <option>
, tetapi val tidak cocok (mungkin terjadi tergantung pada sumber nilai), maka "tidak ada" dipilih dan $select.val()
akan kembali null
.
Jadi, untuk contoh yang ditunjukkan, dan demi ketahanan, Anda dapat menggunakan sesuatu seperti ini https://jsfiddle.net/1250Ldqn/ :
var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
$select.val("DEFAULT");
}
Catatan 4 - kecocokan teks yang tepat:
Jika Anda ingin mencocokkan dengan teks yang tepat, Anda dapat menggunakan filter
fungsi with. mis. https://jsfiddle.net/yz7tu49b/2/ :
var $select = $('.selDiv .opts');
$select.children().filter(function(){
return this.text == "Selection 2";
}).prop('selected', true);
meskipun jika Anda memiliki spasi putih tambahan, Anda mungkin ingin menambahkan trim ke cek seperti pada
return $.trim(this.text) == "some value to match";
Catatan 5 - cocok dengan indeks
Jika Anda ingin mencocokkan berdasarkan indeks, cukup indeks anak-anak yang terpilih misalnya https://jsfiddle.net/yz7tu49b/3/
var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;
Meskipun saya cenderung menghindari properti DOM langsung yang mendukung jQuery saat ini, untuk kode bukti masa depan, sehingga juga dapat dilakukan sebagai https://jsfiddle.net/yz7tu49b/5/ :
var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);
Catatan 6 - gunakan perubahan () untuk menjalankan seleksi baru
Dalam semua kasus di atas, acara perubahan tidak menyala. Ini adalah desain sehingga Anda tidak berakhir dengan acara perubahan rekursif.
Untuk menghasilkan acara perubahan, jika perlu, tambahkan saja panggilan ke objek .change()
jQuery select
. misalnya contoh paling sederhana pertama menjadi https://jsfiddle.net/yz7tu49b/7/
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
Ada juga banyak cara lain untuk menemukan elemen menggunakan pemilih atribut, seperti [value="SEL2"]
, tetapi Anda harus ingat pemilih atribut relatif lambat dibandingkan dengan semua opsi lainnya.
$("#my_select").val("the_new_value").change();
... ... dari so