Not triggering on change for select element

[bland-industries]

I am adding an on change event listener to a select element and it works when I don't use the this plug in. When I add selectBoxIt to my selects it doesn't trigger the event to the original select element. I can manually trigger it to get my listeners to work for testing purposes. I am using a vanilla js process to add and listen to the change event. Any thoughts?

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/45218573-not-triggering-on-change-for-select-element?utm_campaign=plugin&utm_content=tracker%2F23157&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F23157&utm_medium=issues&utm_source=github).

[vensires]

This also affects me. The following acts as a workaroung in my case but I would like the onchange events to get automatically handled: var selectBox = select.data("selectBox-selectBoxIt"); selectBox.selectOption(select.val());

[h908714124]

ok, I've found out that the change event does trigger, but only if you bind your listener via jQuery.change. A listener that's bound natively via addEventListener will not trigger.

This should at least be documented on the project website.

[JetmirAhmati]

hi, i have experienced the same issue and i tried to create and trigger manually the change event. Now 'change' event is detected by native event listener.

 var selectboxElements = $j('.droplist:not(.ranking) select, .datePicker select', this.element);
    selectboxElements.selectBoxIt({
        native: false,
        autoWidth: false,
        dynamicPositioning: false,
        isMobile: function () { }
    });

    selectboxElements.on('change', (function () {
        var value = null;
        return function (event) {
            var target = event.target;
            if (value !== event.target.value) {
                value = target.value;

                if (typeof (Event) === 'function') {
                    target.dispatchEvent(new Event('change'));
                } else {
                    var newEvent;                               //fix for IE
                    newEvent = document.createEvent('Event');
                    newEvent.initEvent('change', true, true);
                    target.dispatchEvent(newEvent);
                }
            }
        };
    })());