twitter-bootstrap - 使用 Bootstrap 选择插件在选择时触发事件 "change"，仅在第二次单击后触发

Question

所以我一直在制作 Marketo 表单，然后添加个人样式和调整以改进 UI。其中一项调整是用 Bootstrap 选择(替换它们的小型 JS 插件)替换现有的选择下拉菜单。

两个 select 是联系在一起的，但是当原来的 select 发生变化时，它需要 change 事件触发一些条件逻辑来决定是否应该显示另一个 select。现在我正在做的是在 Bootstrap 选择上绑定(bind)一个点击事件，然后尝试在原始选择上触发更改事件，如下所示:

$jQ('li').click(function() {

console.log('LI Should trigger click on DD now.');
   event = document.createEvent("HTMLEvents");
   event.initEvent("change", true, false);
   input.dispatchEvent(event); 
});

这具有预期的效果，但只有在第二次单击下拉菜单后。所以这里发生的情况是，如果用户从 Bootstrap 选择中选择例如“美国”，它会更新原始选择，然后应该出现另一个包含“状态”的下拉菜单，这目前只会在我第二次点击 Bootstrap 选择时发生。所以说我选择“美国”然后其他任何东西，州字段只会出现。关于为什么会发生这种情况的任何想法？同样的事情也需要使状态字段消失。

Answer 1

所以我发现了这个问题，这是因为事件在原始下拉列表有机会更新其值之前触发，解决方案是将 dispatchEvent 调用包装在 setTimeout 中。

所以就在这里(以防有人碰巧遇到同样的问题!)

 setTimeout(function() {
 document.getElementById('Country').dispatchEvent(new Event('change', { 'bubbles': true }));
 },200);

如您所见，我也将代码压缩为一行。