Açılır listenin tetik değişikliği olayı

$ (Belge) içindeki açılır listenin değişiklik olayını tetiklemek istiyorum. Jquery kullanarak.

Kullanıcı ayrıntıları sayfasında ülke ve eyalet için basamaklı bir açılır menü var. MVC'de C # ile ülke ve eyalet için (kullanıcı kimliğine dayalı olarak DB'den alınan) değeri nasıl ayarlayabilirim.

O kadar JQuery bilmiyorum ama bu sözdizimi ile yerel olayları ateşlemeye izin verdiğini duydum.

$(document).ready(function(){

    $('#countrylist').change(function(e){
       // Your event handler
    });

    // And now fire change event when the DOM is ready
    $('#countrylist').trigger('change');
});

Trigger () veya change () 'i çağırmadan önce change olay işleyicisini bildirmelisiniz, aksi takdirde tetiklenmeyecektir. @LenielMacaferi'den bahsettiğiniz için teşekkürler.

Daha fazla bilgi burada .

Bunu dene:

$(document).ready(function(event) {
    $('#countrylist').change(function(e){
         // put code here
     }).change();
});

Değişiklik olayını tanımlayın ve hemen tetikleyin. Bu, olay işleyicisinin çağrılmadan önce tanımlanmasını sağlar.

Orijinal posteri yanıtlamak için geç olabilir, ancak başka biri steno notasyondan yararlanabilir ve bu jQuery'nin zincirlemesini takip eder.

jquery zincirleme

Bunu dene:

$('#id').change();

Benim için çalışıyor.

Değerin ayarlanmasıyla birlikte tek satırda: $('#id').val(16).change();

Bağlantılı açılır menülere sahip olmaya çalışıyorsanız, bunu yapmanın en iyi yolu, önceden oluşturulmuş bir seçim kutusunu ve onu isteyen bir AJAX çağrısını döndüren bir komut dosyasına sahip olmaktır.

İhtiyacınız olursa jQuery'nin Ajax yöntemi için belgeler burada.

$(document).ready(function(){

    $('#countrylist').change(function(e){
        $this = $(e.target);
        $.ajax({
            type: "POST",
            url: "scriptname.asp", // Don't know asp/asp.net at all so you will have to do this bit
            data: { country: $this.val() },
            success:function(data){
                $('#stateBoxHook').html(data);
            }
        });
    });

});

Ardından, "stateBoxHook" kimliğiyle eyalet seçim kutunuzun etrafında bir aralık bırakın

alternatif olarak açılır listenin kendisine onchange özniteliğini koyabilirsiniz, bu onchange bunun gibi belirli jquery işlevini çağırır.

<input type="dropdownlist" onchange="jqueryFunc()">

<script type="text/javascript">
$(function(){
    jqueryFunc(){
        //something goes here
    }
});
</script>

Umarım bu size yardımcı olur ve lütfen bu kodun herhangi bir fikir üzerinde test edilmemiş kaba bir taslak olduğunu unutmayın. Teşekkürler

Bazı nedenlerden dolayı, jQueryburada sağlanan diğer çözümler komut dosyasını konsoldan çalıştırırken çalıştı, ancak Chrome Yer İşaretlerinden tetiklendiğinde benim için çalışmadı .

Neyse ki, bu Vanilla JS çözümü ( triggerChangeEventişlev) işe yaradı:

/**
  * Trigger a `change` event on given drop down option element.
  * WARNING: only works if not already selected.
  * @see /programming/902212/trigger-change-event-of-dropdown/58579258#58579258
  */
function triggerChangeEvent(option) {
  // set selected property
  option.selected = true;
  
  // raise event on parent <select> element
  if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    option.parentNode.dispatchEvent(evt);
  }
  else {
    option.parentNode.fireEvent("onchange");
  }
}

// ################################################
// Setup our test case
// ################################################

(function setup() {
  const sel = document.querySelector('#fruit');
  sel.onchange = () => {
    document.querySelector('#result').textContent = sel.value;
  };
})();

function runTest() {
  const sel = document.querySelector('#selector').value;
  const optionEl = document.querySelector(sel);
  triggerChangeEvent(optionEl);
}

<select id="fruit">
  <option value="">(select a fruit)</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="pineapple">Pineapple</option>
</select>

<p>
  You have selected: <b id="result"></b>
</p>
<p>
  <input id="selector" placeholder="selector" value="option[value='banana']">
  <button onclick="runTest()">Trigger select!</button>
</p>