Setel indeks Dropdown yang dipilih menggunakan jQuery

165

Bagaimana cara mengatur indeks dropdown di jQuery jika cara saya menemukan kontrol adalah sebagai berikut:

$("*[id$='" + originalId + "']")

Saya melakukannya dengan cara ini karena saya membuat kontrol secara dinamis dan karena id diubah ketika menggunakan Formulir Web, saya menemukan ini sebagai pekerjaan untuk menemukan saya beberapa kontrol. Tetapi begitu saya memiliki objek jQuery, saya tidak tahu bagaimana mengatur indeks yang dipilih menjadi 0 (nol).

jquery ons
sumber

Jawaban:

352

Pertama-tama - pemilih itu sangat lambat. Ini akan memindai setiap elemen DOM mencari id. Ini akan menjadi lebih sedikit hit kinerja jika Anda bisa menetapkan kelas ke elemen.

$(".myselect")

Untuk menjawab pertanyaan Anda, ada beberapa cara untuk mengubah nilai elemen terpilih di jQuery

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;

// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);
gnarf
sumber
apakah ada cara yang lebih baik untuk melakukannya? Saya pikir itu akan memindai seluruh DOM yang mencari untuk mencocokkan ID, tapi karena saya baru mengenal jQuery, saya pikir, mari kita membuatnya bekerja dan kemudian melihat apakah ada cara yang lebih baik untuk melakukannya. Saran apa pun akan dihargai.
oz.
Ya - jika Anda dapat menetapkan kelas ke elemen yang harus Anda temukan, itu akan menjadi pemilih yang jauh lebih cepat.
gnarf
@gnarf bukankah ID lebih cepat?
KBN
#an-idlebih cepat, tetapi *[id$=ends-with]jauh lebih lambat, itulah arti "menetapkan kelas ke elemen"
gnarf
Bagaimana jika saya memiliki beberapa ASP.net DropDownList dengan nilai indeks yang dipilih berbeda?
SearchForKnowledge
106

Baru saja menemukan ini, ini berfungsi untuk saya dan saya pribadi merasa lebih mudah untuk membaca.

Ini akan mengatur indeks aktual seperti pilihan nomor 3 jawaban gnarf.

// sets selected index of a select box the actual index of 0 
$("select#elem").attr('selectedIndex', 0);

Ini tidak berfungsi tetapi sekarang ... lihat bug: http://dev.jquery.com/ticket/1474

Tambahan

Seperti yang direkomendasikan dalam komentar, gunakan:

$("select#elem").prop('selectedIndex', 0);

4imble
sumber
30
Dan pada jQuery 1.6 Anda harus menggunakan .prop('selectedIndex', 0);terlepas dari apakah .attr()berfungsi atau tidak :)
gnarf
1
Benar, itu sebenarnya mungkin tidak berfungsi di 1.7. lihat jawaban yang diterima: stackoverflow.com/questions/8010664/…
4imble
+1 untuk addendum. Kode lama saya rusak karena masalah ini
BiLaL
11

Saya menulis jawaban ini pada tahun 2015, dan untuk beberapa alasan (mungkin versi jQuery yang lebih lama) tidak ada jawaban lain yang berfungsi untuk saya. Maksud saya, mereka mengubah indeks yang dipilih, tetapi sebenarnya tidak mencerminkan dropdown yang sebenarnya.

Berikut ini cara lain untuk mengubah indeks, dan sebenarnya merefleksikannya dalam dropdown:

$('#mydropdown').val('first').change();
PaulG
sumber
1
Terima kasih atas jawaban anda. Hanya jawaban ini yang berhasil untuk saya
Viraj Dhamal
Juga di 2015, saya tidak punya masalah dengan prop('selectedIndex', ...);(diuji dengan Chrome & Firefox) mengubah pilihan.
Lambart
2
Untuk apa nilainya, harus ditunjukkan bahwa Anda melakukan hal yang berbeda di sini memicu changeacara di drop-down, yang juga bisa menjadi solusi / solusi yang berguna bagi orang-orang yang mengubah pilihan dengan menelepon prop('selectedIndex', ...), daripada menelepon val(...). Mungkin masalahnya adalah Anda mendengarkan suatu changeacara, dan ITULAH yang tidak berhasil untuk Anda? Memang benar bahwa mengubah property tidak akan memecat peristiwa apa pun ...
Lambart
9

saya menggunakan 

$('#elem').val('xyz');

untuk memilih elemen opsi yang memiliki nilai = 'xyz'

djs
sumber
9

Kode JQuery:

$("#sel_status").prop('selectedIndex',1);

Kode Jsp:

Status:
<select name="sel_status"
    id="sel_status">
    <option value="1">-Status-</option>
    <option>ALL</option>
    <option>SENT</option>
    <option>RECEIVED</option>
    <option>DEACTIVE</option>
</select>
sathya
sumber
3

Anda ingin mengambil nilai opsi pertama di elemen pilih.

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));
MacAnthony
sumber
3

Untuk memilih opsi ke-2

$('#your-select-box-id :nth-child(2)').prop('selected', true);

Di sini kita menambahkan `pemicu ('perubahan') untuk membuat acara tersebut berjalan.

$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');
Jarrod
sumber
ini jawaban yang jauh lebih baik.
Ben Dehghan
1 
$("[id$='" + originalId + "']").val("0 index value");

akan mengaturnya ke 0

Josh Mein
sumber
1

Pilih opsi ke-4

$('#select').val($('#select option').eq(3).val());

contoh di jsfiddle

dabar
sumber
2
solusi yang valid ... untuk kontes kode-kebingungan! :)
Lambart