Saya memiliki sebuah daftar drop-down dengan nilai yang diketahui. Apa yang saya'm mencoba untuk lakukan adalah mengatur daftar drop-down untuk nilai tertentu yang saya tahu ada menggunakan jQuery. Menggunakan JavaScript biasa, saya akan melakukan sesuatu seperti:
ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.
Namun, aku harus melakukan ini dengan jQuery, karena saya'm menggunakan class CSS untuk saya pemilih (bodoh ASP.NET client id...).
Berikut ini adalah beberapa hal yang saya've mencoba:
$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.
Bagaimana saya bisa melakukannya dengan jQuery?
Update
Jadi ternyata, aku telah melakukannya dengan benar pertama kalinya dengan:
$("._statusDDL").val(2);
Ketika saya menempatkan peringatan tepat di atas bekerja dengan baik, tetapi ketika saya menghapus waspada dan biarkan berjalan pada kecepatan penuh, saya mendapatkan error
Bisa tidak mengatur properti yang dipilih. Indeks Tidak Valid
I'm tidak yakin jika ini's bug dengan jQuery atau Internet Explorer 6 (I'm menebak Internet Explorer 6), tapi itu's sangat menjengkelkan.
jQuery's dokumentasi menyatakan:
[jQuery.val] cek, atau memilih, semua tombol radio, kotak centang, dan pilih opsi yang sesuai dari nilai-nilai.
Perilaku ini adalah di jQuery
versi 1.2
dan di atas.
Anda kemungkinan besar ingin ini:
$("._statusDDL").val('2');
Just FYI, anda don't harus menggunakan kelas CSS untuk mencapai hal ini.
Anda dapat menulis baris kode berikut untuk mendapatkan kontrol yang benar nama pada klien:
$("#<%= statusDDL.ClientID %>").val("2");
ASP.NET akan membuat kontrol ID dengan benar di dalam jQuery.
Setelah melihat beberapa solusi, ini bekerja untuk saya.
Saya memiliki satu daftar drop-down dengan beberapa nilai-nilai dan aku ingin memilih nilai yang sama dari daftar drop-down... Jadi pertama saya dimasukkan ke dalam variabel selectIndex
pertama saya drop-down.
var indiceDatos = $('#myidddl')[0].selectedIndex;
Maka, saya pilih yang turun di kedua daftar drop-down.
$('#myidddl2')[0].selectedIndex = indiceDatos;
Catatan:
Saya kira ini adalah yang terpendek, dapat diandalkan, umum dan solusi elegan.
Karena dalam kasus saya, saya'm menggunakan opsi yang dipilih's data atribut bukan nilai atribut. Jadi jika anda tidak memiliki nilai yang unik untuk masing-masing opsi, metode di atas adalah yang terpendek dan manis!!
Solusi ini tampaknya berasumsi bahwa masing-masing item dalam daftar drop-down memiliki val() nilai yang berkaitan dengan posisi mereka di daftar drop-down.
Hal-hal yang sedikit lebih rumit jika ini isn't kasus ini.
Untuk baca yang dipilih indeks dari daftar drop-down, anda akan menggunakan ini:
$("#dropDownList").prop("selectedIndex");
Untuk set yang dipilih indeks dari daftar drop-down, anda akan menggunakan ini:
$("#dropDownList").prop("selectedIndex", 1);
Perhatikan bahwa prop() fitur ini memerlukan JQuery v1.6 atau yang lebih baru.
Let's melihat bagaimana anda akan menggunakan dua fungsi.
Seandainya anda memiliki sebuah daftar drop-down dari nama-nama bulan.
<select id="listOfMonths">
<option id="JAN">January</option>
<option id="FEB">February</option>
<option id="MAR">March</option>
</select>
Anda bisa menambahkan "Bulan Sebelumnya" dan "Bulan Berikutnya" tombol, yang terlihat pada saat ini dipilih drop-down item daftar, dan perubahan ke sebelumnya/berikutnya bulan ini:
<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />
Dan berikut's JavaScript yang tombol-tombol ini akan berjalan:
function btnPrevMonth_Click() {
var selectedIndex = $("#listOfMonths").prop("selectedIndex");
if (selectedIndex > 0) {
$("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
}
}
function btnNextMonth_Click() {
// Note: the JQuery "prop" function requires JQuery v1.6 or later
var selectedIndex = $("#listOfMonths").prop("selectedIndex");
var itemsInDropDownList = $("#listOfMonths option").length;
// If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
if (selectedIndex < (itemsInDropDownList - 1)) {
$("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
}
}
Situs berikut ini juga berguna, untuk menunjukkan bagaimana untuk mengisi daftar drop-down dengan data JSON:
http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm
Fiuh !!
Semoga ini bisa membantu.
Saya tahu ini adalah pertanyaan lama dan solusi di atas bekerja dengan baik kecuali dalam beberapa kasus.
Seperti
<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>
Jadi Item 4 akan tampil sebagai "yang Dipilih" di browser dan sekarang anda ingin mengubah nilai 3 dan show "Item3" karena yang dipilih bukan Item4.Jadi sesuai solusi di atas,jika anda menggunakan
jQuery("#select_selector").val(3);
Anda akan melihat bahwa Item 3 seperti yang dipilih di browser.Tapi ketika anda mengolah data baik dalam php atau asp , anda akan menemukan nilai yang dipilih sebagai "4".Alasannya adalah bahwa , anda html akan terlihat seperti ini.
<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>
dan mendapat nilai terakhir sebagai "4" di sever sisi bahasa.
JADI SAYA SOLUSI AKHIR PADA HAL INI
newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');
EDIT: Tambahkan single quote sekitar "+newselectedIndex+" sehingga fungsi yang sama dapat digunakan untuk non-nilai numerik.
Jadi apa yang saya lakukan adalah benar-benar ,menghapus atribut yang dipilih dan kemudian membuat yang baru seperti yang dipilih.
Saya akan sangat menghargai komentar pada ini dari senior programmer seperti @strager , @y0mbo , @ISIK dan lain-lain
Jika kita memiliki sebuah dropdown dengan judul "Klasifikasi Data":
<select title="Data Classification">
<option value="Top Secret">Top Secret</option>
<option value="Secret">Secret</option>
<option value="Confidential">Confidential</option>
</select>
Kita bisa mendapatkan itu ke dalam sebuah variabel:
var dataClsField = $('select[title="Data Classification"]');
Kemudian dimasukkan ke variabel lain dengan nilai yang kita inginkan dropdown untuk memiliki:
var myValue = "Top Secret"; // this would have been "2" in your example
Maka kita dapat menggunakan bidang yang kita dimasukkan ke dalam dataClsField
, lakukan find untuk myValue
dan membuatnya dipilih menggunakan .prop()
:
dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');
Atau, anda hanya bisa menggunakan .val()
, tapi anda pemilih dari .
hanya dapat digunakan jika pertandingan kelas pada dropdown, dan anda harus menggunakan tanda kutip pada nilai di dalam tanda kurung, atau hanya menggunakan variabel yang kita set sebelumnya:
dataClsField.val(myValue);
Jadi aku berubah sehingga sekarang ini mengeksekusi setelah 300 miliseconds menggunakan setTimeout. Tampaknya untuk dapat bekerja sekarang.
Saya telah mengalami hal ini berkali-kali ketika loading data dari Ajax call. Saya juga menggunakan .NET, dan dibutuhkan waktu untuk mendapatkan disesuaikan dengan clientId ketika menggunakan jQuery selector. Untuk memperbaiki masalah yang anda're memiliki dan untuk menghindari keharusan untuk menambahkan setTimeout
properti, anda hanya dapat menempatkan "async: false
" di Ajax call, dan itu akan memberikan DOM cukup waktu untuk memiliki benda-benda kembali bahwa anda menambahkan ke pilih. Contoh kecil di bawah ini:
$.ajax({
type: "POST",
url: document.URL + '/PageList',
data: "{}",
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
$('#locPage' + locId).find('option').remove();
$.each(pages, function () {
$('#locPage' + locId).append(
$('<option></option>').val(this.PageId).html(this.Name)
);
});
}
});
Hanya catatan - I've telah menggunakan wildcard selector di jQuery untuk mengambil barang-barang yang dikaburkan oleh ASP.NET CLient Id - ini mungkin bisa membantu anda juga:
<asp:DropDownList id="MyDropDown" runat="server" />
$("[id* = 'MyDropDown']").append("<option value='-1'> </option>"); //etc
Perhatikan id* wildcard - ini akan menemukan elemen bahkan jika nama "ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$MyDropDown"
Saya menggunakan aplikasi yang memperluas fungsi untuk mendapatkan client id, seperti:
$.extend({
clientID: function(id) {
return $("[id$='" + id + "']");
}
});
Maka anda dapat menghubungi ASP.NET kontrol dalam jQuery seperti ini:
$.clientID("_statusDDL")
<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
<asp:ListItem Value="1" Text="aaa"></asp:ListItem>
<asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>
ClientIDMode="Statis"
$('#DropUserType').val('1');
Bagaimana anda memuat nilai-nilai ke dalam daftar drop-down atau menentukan nilai untuk memilih? Jika anda melakukan ini dengan menggunakan Ajax, maka alasan anda perlu penundaan sebelum pemilihan terjadi bisa jadi karena nilai-nilai yang tidak dimuat pada saat garis yang dimaksud dieksekusi. Ini juga akan menjelaskan mengapa itu bekerja ketika anda menempatkan peringatan pernyataan pada baris sebelum menetapkan status sejak waspada aksi akan memberikan cukup penundaan untuk data load.
Jika anda menggunakan salah satu dari jQuery's Ajax metode, anda dapat menentukan fungsi callback dan kemudian menempatkan $("._statusDDL").val(2);
ke fungsi callback.
Ini akan menjadi cara yang lebih dapat diandalkan dari penanganan masalah karena anda bisa yakin bahwa metode yang dijalankan saat data sudah siap, bahkan jika itu membutuhkan waktu lebih lama dari 300 ms.