使用引导选择插件触发选择事件“更改”，仅在第二次单击后触发答案

【问题标题】：Triggering event "change" on select using bootstrap select plugin, only fires after second click使用引导选择插件触发选择事件“更改”，仅在第二次单击后触发
【发布时间】：2014-10-06 14:24:57
【问题描述】：

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

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

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

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

【问题讨论】：

标签： twitter-bootstrap events select drop-down-menu onchange

【解决方案1】：

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

就是这样（以防有人碰巧遇到同样的问题！）

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

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

【讨论】：