触发下拉菜单的更改事件

我想使用jquery触发$（document）.ready中下拉列表的change事件。

我在用户详细信息页面上有一个国家和州的层叠下拉列表。我如何使用C＃在MVC中设置国家和州的值（基于用户ID从数据库获取）。

我不太了解JQuery，但我听说它允许使用此语法触发本机事件。

$(document).ready(function(){

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

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

您必须在调用trigger（）或change（）之前声明change事件处理程序，否则不会被触发。感谢您提到@LenielMacaferi。

更多信息在这里。

试试这个：

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

定义更改事件，并立即触发它。这样可以确保在调用事件处理程序之前已对其进行了定义。

回答原始海报可能迟到了，但是其他人可能会从速记符号中受益，并且这遵循了jQuery的链接等等。

jQuery链接

试试这个：

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

为我工作。

与设置值一起一行： $('#id').val(16).change();

如果您尝试链接下拉列表，则最好的方法是使用一个脚本返回预构建的选择框和一个请求它的AJAX调用。

如果需要，这里是jQuery Ajax方法的文档。

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