Kích hoạt sự kiện thay đổi của menu thả xuống

Tôi muốn kích hoạt sự kiện thay đổi của danh sách thả xuống trong $ (document). Đã sử dụng jquery.

Tôi có một trình đơn thả xuống xếp tầng cho quốc gia và tiểu bang trong trang chi tiết người dùng. làm cách nào để đặt giá trị (được lấy từ DB dựa trên id người dùng) cho quốc gia và tiểu bang trong MVC bằng C #.

Tôi không biết nhiều JQuery nhưng tôi đã nghe nói rằng nó cho phép kích hoạt các sự kiện gốc với cú pháp này.

$(document).ready(function(){

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

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

Bạn phải khai báo trình xử lý sự kiện thay đổi trước khi gọi trigger () hoặc change () nếu không nó sẽ không được kích hoạt. Cảm ơn vì đã đề cập @LenielMacaferi.

Thông tin thêm tại đây .

Thử đi:

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

Xác định sự kiện thay đổi và kích hoạt nó ngay lập tức. Điều này đảm bảo trình xử lý sự kiện được xác định trước khi gọi nó.

Có thể muộn để trả lời người đăng ban đầu, nhưng ai đó có thể được hưởng lợi từ ký hiệu viết tắt và điều này theo chuỗi của jQuery, v.v.

chuỗi jquery

Thử đi:

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

Làm việc cho tôi.

Trên một dòng cùng với việc đặt giá trị: $('#id').val(16).change();

Nếu bạn đang cố gắng tạo menu thả xuống được liên kết, cách tốt nhất để làm điều đó là có một tập lệnh trả về hộp chọn được tạo sẵn và lệnh gọi AJAX yêu cầu nó.

Đây là tài liệu về phương thức Ajax của jQuery nếu bạn cần.

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

});

Sau đó, có một khoảng xung quanh hộp chọn trạng thái của bạn với id là "stateBoxHook"

Ngoài ra, bạn có thể đặt thuộc tính onchange trên chính danh sách thả xuống, onchange đó sẽ gọi một số hàm jquery như thế này.

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

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

hy vọng điều này sẽ giúp bạn và xin lưu ý rằng mã này chỉ là một bản nháp sơ bộ, không được thử nghiệm trên bất kỳ lý tưởng nào. cảm ơn

Vì một số lý do, các jQuerygiải pháp khác được cung cấp ở đây hoạt động khi chạy tập lệnh từ bảng điều khiển, tuy nhiên, nó không hoạt động với tôi khi được kích hoạt từ Chrome Bookmarklets .

May mắn thay, giải pháp Vanilla JS này ( triggerChangeEventhàm) đã hoạt động:

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