JQuery kullanarak bir DropDownList değerini nasıl ayarlayabilirim?

Soruda belirtildiği gibi, jQuery kullanarak bir DropDownList denetiminin değerini nasıl ayarlayabilirim?

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

seçenekler etiketlerindeki değerin val yöntemindeki değerle eşleştiğinden emin olun.

Dizinle çalışıyorsanız, seçilen dizini doğrudan .attr () ile ayarlayabilirsiniz:

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

Bu, onu açılan listedeki ilk değere ayarlayacaktır.

Düzenleme: Yukarıda yaptığım şekilde çalışırdı. Ama artık öyle değil gibi görünüyor.

Ancak Han'ın yorumlarda çok hoş bir şekilde işaret ettiği gibi, bunu yapmanın doğru yolu:

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

@Nick Berardi tarafından önerildiği gibi, değiştirdiğiniz değer UI kullanıcı arabirimine yansıtılmıyorsa şunları deneyin:

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

Bu çok basit yaklaşımı deneyin:

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

Açılır listeniz Asp.Net açılır listesiyse aşağıdaki kod düzgün çalışır,

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

Ancak DropDown'ınız HTML açılır listesiyse bu kod çalışır.

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

Soru için en iyi cevap:

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

Örneğin:

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

veya

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

değeri ayarla ve açılır liste etkinliğini güncelle

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

Bunu yapmanın birçok yolu var. bunlardan bazıları:

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

VEYA

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

Bunun yardımcı olabileceğini düşünüyorum:

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

Bu şekilde yaparsanız, metin içermeyen bir öğe eklersiniz. Bu nedenle, de combo öğesini tıklattığınızda, görünmez, ancak -1 değeri daha sonra $ (". AutoCompleteDepartment") ile seçersiniz. Val (-1); combo'nun geçerli bir değeri olup olmadığını kontrol etmenizi sağlar.

Umarım herkese yardımcı olur.

İngilizcem için üzgünüm.

Bir açılır listenin değerini ayarlamanız gerekiyorsa, en iyi yol

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

Açılır değeri güncelledikten sonra herhangi bir komut dosyasını tetiklemeniz gerekiyorsa Açılır pencerede herhangi bir onChange olayı ayarladıysanız ve açılır listeyi güncelledikten sonra bunu böyle kullanmak zorunda olduğunuzdan daha fazla çalıştırmak istiyorsanız

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

Seçilen seçeneği hızlı bir şekilde ayarlamak için yapılan bir işlev şunlardır:

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

Bu işlevi argüman öğesi kimliği ve seçilen değerle çağırın; bunun gibi:

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

Ayarlanacak birçok seçenek olduğunda kullanışlıdır.

Hepsini <options ....></options>Ajax ile yüklediğinizde çağrı
yapmak için bu adımı izleyin.

1).
Örn. İçin açılır menü set değeri için ayrı bir yöntem oluşturun :

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

2). Ajax çağrı başarılı olduğunda tüm html ekleme görevi tamamlandığında bu yöntemi çağırın

Örn:

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

drop-down selectedDeğeri ayarlayın ve değişiklikleri güncelleyin

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

Burada önce Modelseçilen değeri güncelledikten sonra güncelledik

// Html Açılır listenin biçimi.

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

// Seçili Öğeyi javascript kullanarak test2 olarak değiştirmek istiyorsanız. Bunu dene. // seçmek istediğiniz bir sonraki seçeneği belirleyin

var NewOprionValue = "Test2"

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

Yukarıda vurgulanan / kontrol edilen yanıtı kullanmak benim için çalıştı ... işte biraz içgörü. Ben URL almak üzerinde biraz hile, ama temelde Javascript URL tanımlamak ve sonra yukarıdan jquery cevap yoluyla ayarlama:

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

Bootstrap kullanan kişiler için kullanmak $(#elementId').selectpicker('val','elementValue')yerine $('#elementId').val('elementValue')ikinci arayüzünde değerini güncellemek olmadığı için.

Not : .change()İşlev, yukarıda bazı yanıtlarda önerildiği gibi çalışır, ancak $('#elementId').change(function(){ //do something })işlevi tetikler .

Gelecekte bu konuyu referans alan insanlar için bunu yayınlamak.