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

Question

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

这两个选择是链接的，但是当原始选择更改时，它需要更改事件才能触发某些条件逻辑决定是否显示另一个选择。现在我在做什么是绑定在引导click事件进行选择，然后试图开枪原来选择更改事件，像这样：

$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”，它会更新原始选择，然后会出现另一个包含“states”的下拉菜单，这将仅在第二次点击引导选择时发生。所以说，我选择“美国”，然后选择其他任何东西，国家领域才会出现。任何想法为什么会发生？同样的事情也需要让国家领域消失。

Answer 1

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

所以这里（如果有人碰巧绊倒对同一问题！）

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

正如你可以看到我刚刚凝聚的代码到一个单一的太行。