jquery.selectBoxIt.js
jquery.selectBoxIt.js copied to clipboard
Not triggering on change for select element
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! We accept bounties via Bountysource.
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());
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.
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);
}
}
};
})());