I’m having trouble with a dropdown menu on a touch device. The onchange event works perfectly the first time someone picks an option, but when I load the form again it stops working properly.
Here’s what happens: I have two dropdown menus where the second one gets populated based on what you choose in the first one. This works great initially. But when someone uses the form a second time and picks the same option in the first dropdown, the onchange event doesn’t fire at all.
I already tried resetting the form and even manually setting the selectedIndex property, but nothing seems to work. The event just won’t trigger when the same value gets selected again.
Is there a way to completely reset or refresh the onchange event listener so it will fire every time, even for the same selection? I’m thinking if I can somehow reset the event state, it might solve this touch device issue I’m dealing with.
I encountered a similar issue with touch devices where the onchange event wouldn’t trigger on repeated selections. A solution that worked for me was to temporarily reset the dropdown by setting its selectedIndex to -1 or an empty option before applying the desired value. This approach creates the perception of a change, effectively forcing the onchange event to fire. I found this method to be more effective than directly manipulating event listeners, particularly on Mobile Safari, which can behave unpredictably.
u could also try removing and re-adding the event listener when the form reloads. It might help with the onchange firing properly every time, even for the same selection. Good luck!
This happens because browsers track the select element’s state internally. I fixed it by manually triggering events with dispatchEvent. Don’t rely on just the native onchange - create a custom function that fires the change event whenever you need it. Just call element.dispatchEvent(new Event(‘change’, { bubbles: true })) after setting the value. This skips the browser’s change detection and makes your event handler run even if the value didn’t actually change. Works great on touch apps where users keep reselecting the same options.