Bagaimana Anda memilih opsi tertentu dalam elemen SELECT di jQuery?


718

Jika Anda tahu Indeks, Nilai, atau Teks. juga jika Anda tidak memiliki ID untuk referensi langsung.

Ini , ini dan ini semua adalah jawaban yang membantu.

Markup contoh

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

46
$("#my_select").val("the_new_value").change();... ... dari so
dsdsdsdsd

Jawaban:


1206

Selector untuk mendapatkan elemen opsi tengah dengan nilai adalah

$('.selDiv option[value="SEL1"]')

Untuk indeks:

$('.selDiv option:eq(1)')

Untuk teks yang dikenal:

$('.selDiv option:contains("Selection 1")')

EDIT : Seperti yang dikomentari di atas OP mungkin setelah mengubah item yang dipilih dari dropdown. Dalam versi 1.6 dan lebih tinggi, metode prop () disarankan:

$('.selDiv option:eq(1)').prop('selected', true)

Dalam versi yang lebih lama:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2 : setelah komentar Ryan. Kecocokan pada "Pilihan 10" mungkin tidak diinginkan. Saya tidak menemukan pemilih yang cocok dengan teks lengkap, tetapi filter berfungsi:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3 : Gunakan hati-hati $(e).text()karena dapat mengandung baris baru membuat perbandingan gagal. Ini terjadi ketika opsi ditutup secara implisit (tanpa </option>tag):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

Jika Anda cukup menggunakan e.textspasi putih tambahan seperti baris baru tambahan akan dihapus, menjadikan perbandingan lebih kuat.


8
: berisi tidak bagus karena akan cocok dengan potongan teks; bermasalah jika ada teks opsi Anda yang merupakan substring dari teks opsi lain.
Ryan

26
Ini juga berfungsi $ ('# id opsi [value = "0"]'). Attr ('terpilih', 'terpilih');
DevC

@Grastveit cara mengubah warna opsi pertama jika dipilih atau tidak ketika memiliki kelas katakanlah myClass. Terima kasih
Zaker

@ Pengguna saya tidak mengerti. Mungkin mempostingnya dalam pertanyaan baru? Atau $ ('. SelDiv .myClass'). Css ('warna', 'merah')?
Grastveit

6
Saya ingin menambahkan Anda harus PASTI menggunakan prop dan bukan attr. Saya hampir gila mencoba men-debug aplikasi dan mengubah dari attr ke prop memperbaikinya.
user609926

125

Tak satu pun dari metode di atas memberikan solusi yang saya butuhkan jadi saya pikir saya akan memberikan apa yang berhasil untuk saya.

$('#element option[value="no"]').attr("selected", "selected");

10
Catatan pada jQuery 1.6 ini harus digunakan propdan tidak attr.
Hilang Coding

@GoneCoding Menggunakan .attrsudah benar. "dipilih" adalah atribut dari <option> w3.org/TR/html5/forms.html#attr-option-selected
Carlos Llongo

3
@CarlosLlongo: Itu tidak relevan. Rekomendasi jQuery adalah untuk selalu menggunakan proppreferensi attr. Itu menghemat harus mencari setiap properti di w3.org untuk melihat apakah itu hanya atribut, atau diimplementasikan dengan tindakan dukungan.
Hilang Coding

82

Anda bisa menggunakan val()metode:

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

20
Ini salah karena Anda MENGATUR nilai SEMUA elemen SELECT ke the_value. .val bukan fungsi pemilih / filter! Ini adalah accessor properti dan melewatinya yang string SETS nilainya. Saya mencoba untuk mengambil kembali suara saya tetapi terlambat setelah saya menyadari ini dalam pengujian.
AaronLS

4
Seberapa panas Anda mendapat 10 suara sebagai jawaban yang berguna? Val () adalah pengambil dan penyetel. Jika Anda hanya menggunakan val (), Anda akan mendapatkan nilainya. Jika Anda melewatkan sesuatu seperti val ('the_value') Anda mengaturnya ke 'the_value'
Gui

12
Silakan @AaronLS dan @guilhermeGeek, lihat dokumen (contoh terakhir). Ini berfungsi sebagai pemilih untuk pilih, kotak centang dan tombol radio, dan sebagai penyetel nilai untuk input teks dan textareas.
Leandro Ardissone

9
Anda salah membaca dokumentasi. Untuk kotak centang, radio, dan kotak daftar, perintah menetapkan atribut "terpilih" untuk item-item itu. Contoh terakhir menunjukkan bagaimana melewati val ("kotak centang 1") menyebabkannya menjadi dipilih. Ini tidak sama dengan "pemilih" dalam hal mendapatkan objek melalui pemilih CSS / jquery. Saya menguji kode Anda, tidak berhasil.
AaronLS

27
+1: tidak, ini bukan pemilih JQuery, namun saya pikir sebagian besar orang yang mencari pertanyaan ini seperti saya, dan hanya ingin mengubah opsi yang saat ini dipilih; datang dengan pemilih yang sebenarnya hanyalah cara untuk melakukan itu. Dan ini tentu saja lebih baik daripada jawaban yang saya lihat yang membuat Anda mengulangi semua opsi.
kdgregory

57

Menurut nilai, apa yang berhasil bagi saya dengan jQuery 1.7 adalah kode di bawah ini, coba ini:

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

5
Saya tidak yakin Anda memerlukan metode .change ().
Phillip Senn

6
Itu .change()perlu. Saya punya contoh di mana saya mengganti thumbnail berdasarkan SELECT. Ketika saya mengunggah tema khusus, itu seharusnya memilih "Tema Kustom" dari daftar opsi. The .prop()panggilan bekerja, tapi tanpa .change(), gambar thumbnail di sebelah kanan pilih saya tidak pernah diperbarui.
Volomike

2
.change () adalah saran terbaik. +1
Ja8zyjits

1
Catatan: propnilai boolean menghasilkan output yang sama. misalnya.prop('selected', true)
Goding Coding

Tergantung, beberapa browser - mungkin browser lama - membutuhkan string yang 'dipilih'. Saya pikir mayoritas dari mereka mendukung string teks.
mpoletto

16

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 $selectadalah 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 selecttag dengan mengatur selectedproperti yang cocok optiondengan 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 booleanparameter (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 filterfungsi 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.


13

Anda bisa memberi nama pilih dan gunakan ini:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

Ini harus memilih opsi yang Anda inginkan.


12
   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

Terima kasih atas kiriman Anda, tetapi apa yang ditambahkan jawaban ini ke percakapan yang tidak termasuk dalam jawaban yang diterima?
Edward

jika ada opsi yang sudah dipilih maka ini akan gagal karena drop-down tidak dapat memiliki lebih dari satu item kecuali itu adalah multi-pilih. Anda perlu melakukan .prop ('terpilih', benar)
derekcohen

9

Menjawab pertanyaan saya sendiri untuk dokumentasi. Saya yakin ada cara lain untuk mencapai ini, tetapi ini berhasil dan kode ini diuji.

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>

9

Tepatnya akan berhasil coba metode di bawah ini

Untuk opsi pilih normal

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

Untuk opsi pilih 2 opsi memicu perlu digunakan

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>


8

Untuk menetapkan nilai pilih dengan memicu dipilih:

$('select.opts').val('SEL1').change();

Untuk opsi pengaturan dari ruang lingkup:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

Kode ini menggunakan pemilih untuk mengetahui objek yang dipilih dengan kondisi, lalu ubah atribut yang dipilih oleh attr().


Lebih lanjut, saya sarankan untuk menambahkan change()acara setelah mengatur atribut selected, dengan melakukan ini kode akan menutup untuk mengubah pilih oleh pengguna.


6

Saya menggunakan ini, ketika saya tahu indeks daftar.

$("#yourlist :nth(1)").prop("selected","selected").change();

Ini memungkinkan daftar untuk berubah, dan menjalankan acara perubahan. ": Nth (n)" dihitung dari indeks 0


5

saya akan pergi dengan: -

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

5

Coba ini

Anda cukup menggunakan id bidang pilih alih-alih #id (mis. # select_name)

bukannya nilai opsi menggunakan pilih opsi Anda nilai

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>

3

Untuk Jquery dipilih jika Anda mengirim atribut berfungsi dan perlu memperbarui-pilih opsi

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

3
/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

1

The $('select').val('the_value');tampak solusi yang tepat dan jika Anda memiliki tabel data baris maka:

$row.find('#component').val('All');

1

jika Anda tidak ingin menggunakan jQuery, Anda dapat menggunakan kode di bawah ini:

document.getElementById("mySelect").selectedIndex = "2";

1

Terima kasih untuk pertanyaannya. Semoga kode ini akan bekerja untuk Anda.

var val = $("select.opts:visible option:selected ").val();

0
$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

atau

$('#select option[value="myValue"]').prop("selected",true).trigger("change");

Harap edit jawaban Anda sehingga kode diformat sebagai kode. Lakukan ini dengan menggunakan bilah alat, atau cukup indentasi semua baris dari setiap blok kode dengan empat spasi.
Beruic
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.