ทริกเกอร์เหตุการณ์การเปลี่ยนแปลงของเมนูแบบเลื่อนลง

ฉันต้องการทริกเกอร์เหตุการณ์การเปลี่ยนแปลงของดรอปดาวน์ใน $ (เอกสาร) ใช้ jquery

ฉันมีรายการแบบเลื่อนลงแบบเรียงซ้อนสำหรับประเทศและรัฐในหน้ารายละเอียดผู้ใช้ ฉันจะตั้งค่า (ซึ่งนำมาจาก DB ตาม ID ผู้ใช้) สำหรับประเทศและรัฐใน MVC ด้วย C # ได้อย่างไร

ฉันไม่รู้ JQuery มากขนาดนั้น แต่ฉันได้ยินมาว่ามันอนุญาตให้เริ่มเหตุการณ์เนทีฟด้วยไวยากรณ์นี้

$(document).ready(function(){

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

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

คุณต้องประกาศตัวจัดการเหตุการณ์การเปลี่ยนแปลงก่อนเรียกใช้ทริกเกอร์ () หรือเปลี่ยนแปลง () มิฉะนั้นจะไม่เริ่มทำงาน ขอบคุณสำหรับการกล่าวถึง @LenielMacaferi

ข้อมูลเพิ่มเติมที่นี่

ลองสิ่งนี้:

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

กำหนดเหตุการณ์การเปลี่ยนแปลงและทริกเกอร์ทันที สิ่งนี้ช่วยให้มั่นใจได้ว่ามีการกำหนดตัวจัดการเหตุการณ์ก่อนที่จะเรียกใช้

อาจจะสายที่จะตอบผู้โพสต์ต้นฉบับ แต่อาจมีคนอื่นได้รับประโยชน์จากสัญกรณ์ชวเลขและสิ่งนี้เป็นไปตามการผูกมัดของ jQuery เป็นต้น

jquery chaining

ลองสิ่งนี้:

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

ใช้ได้ผลสำหรับฉัน

ในบรรทัดเดียวพร้อมกับการตั้งค่า: $('#id').val(16).change();

หากคุณกำลังพยายามเชื่อมโยงดรอปดาวน์วิธีที่ดีที่สุดคือการมีสคริปต์ที่ส่งคืนกล่องเลือกที่สร้างไว้ล่วงหน้าและการเรียก AJAX ที่ร้องขอ

นี่คือเอกสารสำหรับวิธี Ajax ของ jQuery หากคุณต้องการ

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

});

จากนั้นมีช่วงรอบ ๆ กล่องเลือกสถานะของคุณโดยมี id ของ "stateBoxHook"

หรือคุณสามารถใส่ onchange แอตทริบิวต์ในรายการแบบเลื่อนลงได้โดย onchange จะเรียกฟังก์ชัน jquery บางอย่างเช่นนี้

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

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

หวังว่ารหัสนี้จะช่วยคุณได้และโปรดทราบว่ารหัสนี้เป็นเพียงร่างคร่าวๆเท่านั้นไม่ได้ทดสอบกับแนวคิดใด ๆ ขอบคุณ

ด้วยเหตุผลบางอย่างอื่น ๆjQueryการแก้ปัญหาให้ที่นี่ทำงานเมื่อใช้สคริปต์จากคอนโซล แต่มันไม่ได้ทำงานสำหรับฉันเมื่อมีการเรียกจาก Chrome Bookmarklets

โชคดีที่โซลูชัน Vanilla JS ( triggerChangeEventฟังก์ชัน) นี้ใช้งานได้:

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