如何让jQuery下拉框的change事件在页面加载时默认触发？

当然可以搞定这个问题啦！你遇到的情况很常见——change事件只有用户主动切换选项时才会触发，但页面初始化时默认选项已经存在，这时候逻辑没机会跑。咱们只需要在页面加载完成后，手动触发一次下拉框的change事件，就能让默认选项对应的显示隐藏逻辑生效了。

修改后的代码示例 #

你可以直接在绑定完change事件后，链式调用.trigger('change')，这样代码更简洁：

$('.contact-form').on('change', (e) => { 
  var selectedId = $(e.currentTarget).val(); 
  var listofforms = $("#discount").data("display-for").split(","); 
  if (listofforms.indexOf(selectedId) !== -1) { 
    $("#discount").collapse('show'); 
  } else { 
    $("#discount").collapse('hide'); 
  } 
}).trigger('change'); // 绑定事件后立即触发一次

如果担心DOM还没完全加载就执行代码，也可以把逻辑放在$(document).ready()里，确保元素都渲染完成后再绑定事件并触发：

$(document).ready(function() {
  $('.contact-form').on('change', (e) => { 
    var selectedId = $(e.currentTarget).val(); 
    var listofforms = $("#discount").data("display-for").split(","); 
    if (listofforms.indexOf(selectedId) !== -1) { 
      $("#discount").collapse('show'); 
    } else { 
      $("#discount").collapse('hide'); 
    } 
  }).trigger('change');
});

原理说明 #

.trigger('change')相当于模拟了用户手动选择下拉框选项的动作，会触发你绑定的change事件处理函数，这样就能根据默认选中的值自动执行显示或隐藏#discount的逻辑了。

内容的提问来源于stack exchange，提问作者Himanshu Joshi