The “change” trigger event when select plugin is selected using bootstrap, only fires after the second click

Question

So, I make Marketo forms, and then add personal style and settings to improve the user interface. One of these settings is to replace the existing dropdowns with a selection of bootstraps (a small JS plugin that replaces them.)

The two choices are related, but when the original choice changes, it requires the change event to trigger some conditional logic that determines whether another choice should be displayed. Now what I am doing is binding the click event to the bootstrap selection, and then trying to fire the change event in the source element, for example:

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

This has the desired effect, but only after a second click on the drop-down menu. So, this is what happens if a user selects, for example, “America” from the bootstrap selection, he updates the original selection, and then another drop-down menu appears containing “states”, this will only happen the second time I click the select button bootstrap. Therefore, I will say that I choose "America", and then everything else, then the status field will appear. Any ideas as to why this is happening? The same is necessary in order to disappear the state field.

Answer 1

, , , , , dispatchEvent setTimeout.

, ( , - !)

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

, .