Bagaimana saya bisa mengatur nilai DropDownList menggunakan jQuery?

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

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

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

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;

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

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

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

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;

Jawaban terbaik untuk pertanyaan:

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

misalnya:

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

atau

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

setel nilai dan perbarui acara daftar dropdown

$("#id").val("1234").change();

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

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

ATAU

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

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.

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

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.

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

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

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

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>

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.