How to capture events on dynamically changed selects

Question

I have a script that creates a span to presume a select tag, and then hides the select . This allows for easier CSS styling since I can style the span easier, relative to an adamant select tag. With the span, I have a dropdown which is ul tag, The problem is, when I select a value on the "fake select" and use javascript to make that the value of hidden "real" select, the onchange is not triggered. The purpose of this is to help 'none-techies' who want styled selects, and I therefore would like to capture any events they have added to the select such as onchange , onfocus , and onreset

In the code below, for example, if you select the option manually, the onchange event is fired, while the timeout function does not trigger the event

    <script>
        var select = document.getElementsByTagName('select')[0];

        function changed() {
            var select = document.getElementsByTagName('select')[0];
            select.value = 'that is optionification fam!';
        }

        setTimeout(changed, 1000);
    </script>
    <select onchange="alert('Object has changed!')">
        <option value="">Select an Option</option>
        <option>this is option</option>
        <option>that is optionification fam!</option>
        <option>these are options</option>
        <option>those a options</option>
        <option>I like options</option>
        <option>I don't like options</option>
        <option>this is an option</option>
    </select>

UPDATE:

From W3C :

Events that are generated by the user agent, either as a result of user interaction, or as a direct result of changes to the DOM, are trusted by the user agent with privileges that are not afforded to events generated by script through the DocumentEvent.createEvent("Event") method, modified using the Event.initEvent() method, or dispatched via the EventTarget.dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, while untrusted events have a isTrusted attribute value of false.

Most untrusted events should not trigger default actions, with the exception of click or DOMActivate events. These events trigger the default action of an activation trigger (see Activation triggers and behaviors for more details); these untrusted events have an isTrusted attribute value of false, but still initiate any default actions for backwards compatibility. All other untrusted events must behave as if the Event.preventDefault() method had been called on that event.

Since isTrusted is a readable only attribute as well, any scripted changes are 'set-in-stone-untrusted'...and thus the problem!

Can anyone think of a work around, where, I can

• Create "fake"/artificial event responses
• Or alter the select's value using user's input**

Answer 1

Note, at first <script> block select is not defined. Use load event of window to define select element. One workaround would be to use Document.createEvent() with "MouseEvents" as parameter, MouseEvent.initMouseEvent() ( deprecated ) with "change" as first parameter, true , true , window as next three parameters, EventTarget.dispatchEvent() chained to select variable defined within window load event to dispatch change event to <select> element.

See also Trigger click on input=file on asynchronous ajax done() .

 <script> function changed() { var select = document.getElementsByTagName("select")[0]; select.value = "that is optionification fam!"; alert("Object has changed!"); } window.onload = function() { let evt = document.createEvent("MouseEvents"); const select = document.getElementsByTagName("select")[0]; evt.initMouseEvent("change", true, true, window); setTimeout(function() { select.dispatchEvent(evt); }, 3000); } </script> <select onchange="changed()"> <option value="">Select an Option</option> <option>this is option</option> <option>that is optionification fam!</option> <option>these are options</option> <option>those a options</option> <option>I like options</option> <option>I don't like options</option> <option>this is an option</option> </select> 

Using CustomEvent supported at chrome, firefox 6+, ie9+, opera 11+, safari 5.1+ (533.3); EventTarget.dispatchEvent() .

 <script> function changed() { var select = document.getElementsByTagName("select")[0]; select.value = "that is optionification fam!"; alert("Object has changed!"); } window.onload = function() { let evt = new CustomEvent("change"); const select = document.getElementsByTagName("select")[0]; setTimeout(function() { select.dispatchEvent(evt); }, 3000); } </script> <select onchange="changed()"> <option value="">Select an Option</option> <option>this is option</option> <option>that is optionification fam!</option> <option>these are options</option> <option>those a options</option> <option>I like options</option> <option>I don't like options</option> <option>this is an option</option> </select>