Ubah nilai yang dipilih dari daftar drop-down dengan jQuery


840

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.


21
Masalahnya di sini akhirnya menjadi masalah dengan IE6. Saya sedang membuat elemen opsi baru untuk elemen pilih dan kemudian mencoba untuk mengatur nilai ke salah satu elemen opsi yang baru dibuat. IE6 salah menunggu sampai mendapatkan kontrol kembali dari skrip untuk benar-benar membuat elemen baru di DOM sehingga secara efektif apa yang terjadi adalah saya mencoba untuk mengatur daftar drop-down ke opsi yang belum ada, walaupun seharusnya sudah.
phairoh

Anda dapat menggunakan javascript murnidd1 = document.getElementsByClassName('classname here'); dd1.value = 2;
user2144406

Jawaban:


1008

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');

22
Apakah ini berfungsi jika selectdisembunyikan ( display: none;)? Saya tidak bisa membuatnya berfungsi dengan benar ...
Padel

11
Ini baru saja menyelamatkan saya dari menulis hal-hal seperti $('._statusDDL [value="2"]').attr('selected',true);Terima kasih!
Basil

6
@Nordes yang akan terjadi jika mendapatkan nilai yang dipilih. Dalam hal ini mengatur nilai yang dipilih, atau lebih tepatnya, mengatur opsi yang dipilih.
Jon P

107
@JL: Anda perlu menambahkan .change()untuk melihat opsi di frontend daftar dropdown, yaitu$('#myID').val(3).change();
Kai Noack

10
Chaining the .change () harus ditambahkan ke jawabannya. Saya pikir saya akan menjadi gila dengan solusi ini tidak berfungsi sampai saya membaca komentar.
David Baucum

139

Dengan bidang tersembunyi, Anda perlu menggunakan seperti ini:

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

atau

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

Bisakah Anda jelaskan mengapa Anda perlu memecat acara perubahan untuk bidang tersembunyi?
Samuel

1
@Amuel: karena jika Anda mengubah pilihan yang dipilih dengan jQuery, perubahan itu tidak dipicu, sehingga pemicu manual diperlukan.
machineaddict

2
Jika Anda memerlukan perubahan acara api setelah mengubah nilai dropbox, Anda perlu memanggil fungsi perubahan setelah mengatur nilai.
tver3305

Saya secara khusus membutuhkan acara perubahan untuk diaktifkan jadi ini yang paling membantu saya
Rohan

32

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.


8
Itu hanya bekerja ketika javascript Anda berada di dalam markup .aspx atau .ascx dan tidak ketika itu dalam file .js seperti yang terjadi di sini. Juga, tergantung pada seberapa dalam kontrol Anda bersarang di aplikasi Anda (dalam kasus saya mereka sekitar 10 level dalam) ClientID bisa menjadi sangat panjang dan benar-benar dapat menambahkan mengasapi signifikan ke ukuran javascript Anda jika digunakan terlalu bebas. Saya mencoba untuk menjaga markup saya sekecil mungkin, jika saya bisa.
phairoh

2
@ y0mbo Tetapi bahkan jika Anda pindah ke MVC Anda masih harus menggunakan file .JS eksternal untuk JavaScript Anda sehingga browser dan server proxy dapat menyimpannya untuk kinerja.
7wp

1
@Roberto - tetapi MVC tidak menggunakan konvensi penamaan bodoh yang dilakukan oleh asp.net webforms sehingga Anda dapat dengan nyaman merujuk pada file js eksternal ke kontrol yang Anda butuhkan.
lloydphillips

6
Jika Anda membuat javascript gaya OO, Anda dapat meneruskan Id klien Anda ke konstruktor objek Anda. Kode objek semua terkandung dalam file js eksternal, tetapi Anda instantiate dari kode aspx Anda.
mikesigs

1
Saya akan lebih cepat mengatur ClientIDMode = "Static" pada kontrol asp sehingga Anda tahu ID akan menjadi ID yang Anda tentukan. Anda harus berhati-hati jika Anda kemudian menempatkan kontrol itu dalam repeater. msdn.microsoft.com/en-us/library/…
Shawson

25

Coba saja dengan

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

dan tidak dengan

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

23

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.


20

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 !!


5
Ini adalah jawaban yang benar, dan semua orang yang tidak langsung mengatakan'IndexIndex 'dipilih, harus tahu lebih baik. Hore DOM API dan orang-orang yang menulisnya kembali di zaman batu.
vsync

16

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


10

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);

4

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)
            );
        });
    }
});

3

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"


3

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")

3

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


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

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


Jika Anda mencocokkan nama, Anda mungkin menghapusnya $sehingga cocok, bukan 'diakhiri dengan'. Tetapi saran Anda mungkin lebih cepat daripada hanya mencocokkan dengan nama kelas. Lebih cepat lagi akan element.classnameatau #idname.
Alec

2

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.


2
<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');

1

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

$("._statusDDL").attr("selected", "");
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.