Bagaimana saya bisa mengatur nilai DropDownList menggunakan jQuery?


349

Seperti pertanyaannya, bagaimana cara menetapkan nilai kontrol DropDownList menggunakan jQuery?

Jawaban:


602
$("#mydropdownlist").val("thevalue");

pastikan nilai dalam tag opsi cocok dengan nilai dalam metode val.


Saya memiliki validator rentang terhadap daftar drop-down dan saya menetapkan nilai daftar drop-down seperti yang telah Anda jelaskan di atas, namun validator kisaran terus gagal mengatakan kepada saya untuk memilih nilai (ketika nilai yang dipilih berada dalam kisaran). Silakan lihat pertanyaan saya stackoverflow.com/questions/3165033/...
James

21
Ini tidak memecat acara "perubahan".
AGamePlayer

4
Ingin mengulangi - pastikan Anda memiliki set atribut "nilai", atau metode ini tidak akan berfungsi. (Saya sedang membantu seseorang yang menunjukkan ini kepada saya dan bertanya-tanya mengapa itu tidak memilih melalui teks pada daftar dropdown.) Ingin memastikan itu jelas.
JasCav

1
+1 Harus menelepon $("#mycontrolId").selectmenu('refresh');untuk mencerminkan perubahan
VladL

informasi terperinci di tautan ini htmlgoodies.com/beyond/javascript/…
Niamath

52

Jika Anda bekerja dengan indeks, Anda dapat mengatur indeks yang dipilih secara langsung dengan .attr ():

$("#mydropdownlist").attr('selectedIndex', 0);

Ini akan mengaturnya ke nilai pertama di droplist.

Sunting: Cara saya melakukannya di atas dulu bekerja. Tapi sepertinya tidak lagi.

Tapi seperti yang ditunjukkan Han dalam komentarnya, cara yang benar untuk melakukannya adalah:

$("#mydropdownlist").get(0).selectedIndex = index_here;

7
Sekarang, ini tidak berfungsi sama sekali karena selecttag tidak memiliki atribut apa pun yang dinamai selectedIndex. Ini adalah properti dari objek DOM. Karenanya kode harus:$("#mydropdownlist").get(0).selectedIndex = index_here;
Han

5
$("#mydropdownlist").prop('selectedIndex', index_here); Juga berfungsi.
numaroth

("#mydropdownlist"). dapatkan (0) .selectedIndex = index_here; cara ini berhasil !! @
kasim

Cara hebat untuk mengubah yang dipilih dalam dropdown, Terima kasih
Avtandil Kavrelishvili

apakah saya merasakan beberapa agresi pasif dalam jawabannya
Dheeraj

49

Seperti yang disarankan oleh @Nick Berardi, jika nilai Anda yang berubah tidak tercermin di ujung depan UI, coba:

$("#mydropdownlist").val("thevalue").change();

1
terima kasih banyak, hanya satu baris, rapi dan bermanfaat untuk juga meningkatkan perubahan () acara SelectBox menggunakan jQuery dan Laravel Forms.
WhySoSerius

Ini adalah satu-satunya jawaban di mana perubahan benar-benar ditampilkan di dropdown. selectmenutidak terdefinisi dalam versi jQuery saya, tetapi change()lakukan triknya.
Chad Hedgcock

Terima kasih. Ini adalah satu-satunya cara kerjanya bagi saya (setelah mencoba semua yang lain di atas ini).
inspirednz

20

Coba pendekatan yang sangat sederhana ini:

/*make sure that value is included in the options value of the dropdownlist 
e.g. 
(<select><option value='CA'>California</option><option value='AK'>Alaska</option>      </select>)
*/

$('#mycontrolId').val(myvalue).attr("selected", "selected");

2
jangan lupa menelepon$("#mycontrolId").selectmenu('refresh');
VladL

@ VladL Jadi maksud Anda $('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected");?
Dylan Czenski

9

Jika dropdown Anda adalah Asp.Net drop down maka kode di bawah ini akan berfungsi dengan baik,

 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

Tetapi jika DropDown Anda adalah HTML drop down maka kode ini akan berfungsi.

 $("#DropDownName")[0].selectedIndex=0;

5

Jawaban terbaik untuk pertanyaan:

$("#comboboxid").val(yourvalue).trigger("chosen:updated");

misalnya:

$("#CityID").val(20).trigger("chosen:updated");

atau

$("#CityID").val("chicago").trigger("chosen:updated");


2

Ada banyak cara untuk melakukannya. berikut adalah beberapa di antaranya:

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

ATAU

$('select').prop('selectedIndex', 3);

1
Profil Anda menunjukkan Anda terkait dengan tautan yang Anda masukkan di sini. Menautkan ke sesuatu yang Anda berafiliasi (misalnya produk atau situs web) tanpa mengungkapkan bahwa afiliasi dalam posting Anda dianggap sebagai spam di Stack Exchange / Stack Overflow. Lihat: Apa yang menandakan promosi diri "Bagus"? , beberapa tips dan saran tentang promosi diri , Apa definisi yang tepat dari "spam" untuk Stack Overflow? , dan Apa yang membuat sesuatu menjadi spam .
Makyen

1

Saya pikir ini dapat membantu:

    $.getJSON('<%= Url.Action("GetDepartment") %>', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").empty();
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
                    });
                    $(".autoCompleteDepartment").val(-1);                                       
              }  
             );

Jika Anda melakukan ini, Anda menambahkan elemen tanpa teks. Jadi, ketika Anda mengklik de combo, itu tidak muncul, tetapi nilai -1 yang Anda tambahkan kemudian pilih dengan $ (". AutoCompleteDepartment"). Val (-1); memungkinkan Anda mengontrol jika kombo memiliki nilai yang valid.

Semoga ini bisa membantu siapa saja.

Maaf untuk bahasa inggris saya.


1

Jika Anda hanya perlu mengatur nilai dropdown maka cara terbaik adalah

$("#ID").val("2");

Jika Anda harus memicu skrip apa pun setelah memperbarui nilai dropdown seperti Jika Anda mengatur event onChange pada dropdown dan Anda ingin menjalankan ini setelah memperbarui dropdown daripada Anda perlu menggunakan seperti ini

$("#ID").val("2").change();

0

Ini adalah fungsi yang dibuat untuk dengan cepat mengatur opsi yang dipilih:

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);
            }
        });
    }

Panggil fungsi ini dengan id elemen argumen dan nilai yang dipilih; seperti ini:

SetSelected('selectID','some option');

Ini berguna ketika ada banyak opsi pilih yang akan ditetapkan.


0

Dalam kasus ketika Anda memuat semua <options ....></options>dengan panggilan Ajax
Ikuti langkah ini untuk melakukan ini.

1). Buat metode terpisah untuk mengatur nilai drop-down
For Ex:

function set_ip_base_country(countryCode)
    $('#country').val(countryCode)
} 

2). Panggil metode ini ketika panggilan ajax berhasil semua tugas html menambahkan tugas selesai

Untuk Ex:

success: function (doc) {
  .....
  .....
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')
  set_ip_base_country(ip_base_country)
}

0

Tetapkan drop-down selectednilai dan perbarui perubahan

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

Di sini kita pertama-tama menetapkan nilai dari Modeldan kemudian memperbaruinya saat dipilih


0

// Format Html dari daftar dropdown.

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

// Jika Anda ingin mengubah Item yang dipilih ke test2 menggunakan javascript. Coba yang ini. // atur opsi berikutnya yang ingin Anda pilih

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);

0

Menggunakan jawaban yang disorot / dicentang di atas berhasil untuk saya ... inilah sedikit wawasan. Saya sedikit curang dalam mendapatkan URL, tetapi pada dasarnya saya mendefinisikan URL dalam Javascript, dan kemudian mengaturnya melalui jawaban jquery dari atas:

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>

0

Untuk orang yang menggunakan Bootstrap, gunakan $(#elementId').selectpicker('val','elementValue')sebagai ganti $('#elementId').val('elementValue'), karena yang terakhir tidak memperbarui nilai di UI.

Catatan : .change()Fungsi Even berfungsi, seperti yang disarankan di atas dalam beberapa jawaban, tetapi memicu $('#elementId').change(function(){ //do something })fungsi.

Hanya memposting ini di luar sana untuk orang yang merujuk utas ini di masa mendatang.

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.