使用引導選擇插件選擇引發事件「更改」，僅在第二次點擊後觸發

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

正如你可以看到我剛剛凝聚的代碼到一個單一的太行。