选择使用bootstrap select插件触发事件“更改”，仅在第二次单击后触发

Question

所以我一直在制作Marketo表单，然后添加个人样式和调整来改进UI。 其中一个调整是使用bootstrap select替换现有的select下拉列表（替换它们的小JS插件）。

两个选择是链接的，但是当原始选择发生更改时，它需要更改事件来触发一些条件逻辑，以确定是否应显示另一个选择。 现在我正在做的是在bootstrap选择上绑定一个click事件，然后尝试在原始select上触发change事件，如下所示：

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

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

Answer 1

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

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

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

正如您所看到的，我只是将代码缩减为单行。