Ubah nilai yang dipilih dari daftar drop-down dengan jQuery

Saya memiliki daftar drop-down dengan nilai yang diketahui. Apa yang saya coba lakukan adalah mengatur daftar drop down ke 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, saya perlu melakukan ini dengan jQuery , karena saya menggunakan kelas CSS untuk pemilih saya ( id klien ASP.NET bodoh ...).

Berikut adalah beberapa hal yang saya coba:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

Bagaimana saya bisa melakukannya dengan jQuery ?

Memperbarui

Jadi ternyata, saya benar pertama kali dengan:

$("._statusDDL").val(2);

Ketika saya menempatkan peringatan tepat di atas itu berfungsi dengan baik, tetapi ketika saya menghapus peringatan dan membiarkannya berjalan dengan kecepatan penuh, saya mendapatkan kesalahan

Tidak dapat mengatur properti yang dipilih. Indeks Tidak Valid

Saya tidak yakin apakah ini bug dengan jQuery atau Internet Explorer 6 (saya kira Internet Explorer 6 ), tetapi ini sangat menjengkelkan.

Dokumentasi jQuery menyatakan:

[jQuery.val] memeriksa, atau memilih , semua tombol radio, kotak centang, dan pilih opsi yang cocok dengan set nilai.

Perilaku ini dalam jQueryversi 1.2dan di atas.

Anda kemungkinan besar menginginkan ini:

$("._statusDDL").val('2');

Dengan bidang tersembunyi, Anda perlu menggunakan seperti ini:

$("._statusDDL").val(2);
$("._statusDDL").change();

atau

$("._statusDDL").val(2).change();

Hanya FYI, Anda tidak perlu menggunakan kelas CSS untuk mencapai ini.

Anda dapat menulis baris kode berikut untuk mendapatkan nama kontrol yang benar pada klien:

$("#<%= statusDDL.ClientID %>").val("2");

ASP.NET akan membuat ID kontrol dengan benar di dalam jQuery.

Coba saja dengan

$("._statusDDL").val("2");

dan tidak dengan

$("._statusDDL").val(2);

Solusi ini tampaknya menganggap bahwa setiap item dalam daftar drop-down Anda memiliki nilai val () yang berkaitan dengan posisi mereka dalam daftar drop-down.

Hal-hal sedikit lebih rumit jika ini tidak terjadi.

Untuk membaca indeks yang dipilih dari daftar drop-down, Anda akan menggunakan ini:

$("#dropDownList").prop("selectedIndex");

Untuk mengatur indeks yang dipilih dari daftar drop-down, Anda akan menggunakan ini:

$("#dropDownList").prop("selectedIndex", 1);

Perhatikan bahwa fitur prop () memerlukan JQuery v1.6 atau yang lebih baru.

Mari kita lihat bagaimana Anda akan menggunakan kedua fungsi ini.

Andaikan Anda memiliki daftar nama bulan drop-down.

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

Anda bisa menambahkan tombol "Bulan Sebelumnya" dan "Bulan Depan", yang terlihat pada item daftar turun bawah yang dipilih saat ini, dan mengubahnya ke bulan sebelumnya / berikutnya:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

Dan inilah JavaScript yang akan dijalankan tombol-tombol ini:

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 cara mengisi daftar drop-down dengan data JSON:

http://mikesknowledledgebase.com/pages/Services/WebServices-Page8.htm

Fiuh !!

Semoga ini membantu.

Setelah melihat beberapa solusi, ini berhasil untuk saya.

Saya memiliki satu daftar drop-down dengan beberapa nilai dan saya ingin memilih nilai yang sama dari daftar drop-down yang lain ... Jadi pertama-tama saya memasukkan variabel ke selectIndexdrop-down pertama saya.

var indiceDatos = $('#myidddl')[0].selectedIndex;

Kemudian, saya memilih indeks itu pada daftar drop-down kedua saya.

$('#myidddl2')[0].selectedIndex = indiceDatos;

catatan:

Saya kira ini adalah solusi tersingkat, andal, umum, dan elegan.

Karena dalam kasus saya, saya menggunakan atribut data opsi yang dipilih alih-alih atribut nilai. Jadi, jika Anda tidak memiliki nilai unik untuk setiap opsi, metode di atas adalah yang terpendek dan manis !!

Saya tahu ini adalah pertanyaan lama dan solusi di atas berfungsi dengan baik kecuali dalam beberapa kasus.

Suka

<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 ditampilkan sebagai "Dipilih" di browser dan sekarang Anda ingin mengubah nilainya sebagai 3 dan menunjukkan "Item3" sebagai yang dipilih, bukan Item4. Jadi sesuai solusi di atas, jika Anda menggunakan

jQuery("#select_selector").val(3);

Anda akan melihat bahwa Item 3 dipilih di browser. Tetapi ketika Anda memproses data baik dalam php atau asp, Anda akan menemukan nilai yang dipilih sebagai "4". Alasannya adalah, html Anda 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 itu mendapatkan nilai terakhir sebagai "4" dalam bahasa sisi.

SEHINGGA SOLUSI AKHIR SAYA PADA REGARD INI

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

EDIT : Tambahkan satu kutipan di sekitar "+ newselectedIndex +" sehingga fungsionalitas yang sama dapat digunakan untuk nilai-nilai non-numerik.

Jadi yang saya lakukan sebenarnya, menghapus atribut yang dipilih dan kemudian membuat yang baru seperti yang dipilih.

Saya sangat menghargai komentar ini dari programmer senior seperti @strager, @ y0mbo, @ISIK dan lainnya

Jika kami memiliki 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 memasukkannya ke dalam variabel:

var dataClsField = $('select[title="Data Classification"]');

Kemudian masukkan ke variabel lain nilai yang kita inginkan dari dropdown:

var myValue = "Top Secret";  // this would have been "2" in your example

Kemudian kita dapat menggunakan bidang yang kita masukkan dataClsField, mencari myValuedan membuatnya dipilih menggunakan .prop():

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

Atau, Anda bisa saja menggunakan .val(), tetapi pemilih Anda .hanya dapat digunakan jika cocok dengan kelas pada dropdown, dan Anda harus menggunakan tanda kutip pada nilai di dalam tanda kurung, atau cukup gunakan variabel yang kami atur sebelumnya:

dataClsField.val(myValue);

Jadi saya mengubahnya sehingga sekarang dijalankan setelah 300 milidetik menggunakan setTimeout. Kelihatannya sekarang dapat berfungsi.

Saya sering mengalami hal ini ketika memuat data dari panggilan Ajax. Saya juga menggunakan .NET, dan butuh waktu untuk menyesuaikan diri dengan clientId saat menggunakan pemilih jQuery. Untuk memperbaiki masalah yang Anda hadapi dan untuk menghindari harus menambahkan setTimeoutproperti, Anda cukup " async: false" memasukkan panggilan Ajax, dan itu akan memberi DOM cukup waktu untuk memiliki objek kembali yang Anda tambahkan 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 sebuah catatan - Saya telah menggunakan pemilih wildcard di jQuery untuk mengambil item yang dikaburkan oleh ASP.NET CLient IDs - ini mungkin membantu Anda juga:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

Catat id * wildcard- ini akan menemukan elemen Anda meskipun namanya "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"

Saya menggunakan fungsi extended untuk mendapatkan id klien, seperti:

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

Kemudian Anda bisa memanggil kontrol ASP.NET di jQuery seperti ini:

$.clientID("_statusDDL")

Pilihan lain adalah mengatur parameter kontrol ClientID = "Static" di .net dan kemudian Anda dapat mengakses objek di JQuery dengan ID yang Anda atur.

<asp:DropDownList id="MyDropDown" runat="server" />

Gunakan $("select[name$='MyDropDown']").val().

Bagaimana Anda memuat nilai ke daftar turun bawah atau menentukan nilai mana yang harus dipilih? Jika Anda melakukan ini menggunakan Ajax, maka alasan Anda memerlukan penundaan sebelum pemilihan bisa terjadi karena nilai-nilai tidak dimuat pada saat baris yang bersangkutan dieksekusi. Ini juga akan menjelaskan mengapa itu bekerja ketika Anda meletakkan pernyataan peringatan di telepon sebelum mengatur status karena tindakan peringatan akan memberikan cukup penundaan untuk memuat data.

Jika Anda menggunakan salah satu metode Ajax jQuery, Anda dapat menentukan fungsi panggilan balik dan kemudian dimasukkan $("._statusDDL").val(2);ke fungsi panggilan balik Anda.

Ini akan menjadi cara yang lebih dapat diandalkan untuk menangani masalah ini karena Anda dapat yakin bahwa metode dijalankan ketika data sudah siap, bahkan jika itu membutuhkan waktu lebih dari 300 ms.

<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 = "Static"

$('#DropUserType').val('1');

Dalam kasus saya, saya bisa membuatnya bekerja menggunakan metode .attr ().

$("._statusDDL").attr("selected", "");