Question

I’m using the following code to watch for changes to a given SELECT element.

  someSelectElement.change(function () { alert('change made'); });

And it works peachy when I change the value the selected item through the UI.

However, It doesn’t seem to trigger the event if the value is changed via a script. For example, the following code executed in the debugging console changes the selected item, but does NOT fire the event.

$('#someSelectElement').val('NewValue')

I know it seems unusual to need to detect changes made to the control by the other code, and if it was my code I’d just manually trigger the event and call it a day. The trouble is, I am writing a jQuery plug-in that needs to do something when the value of a watched control changes whether it be through user intervention or some client-side script that the user of my plug-in is running.

I’m assuming the behavior of not triggering events in this situation is by design. If not, please speak up and let me know what I’m doing wrong. If so, is there a workaround where I can watch for changes made to the value of a SELECT element regardless of whether they were user or code initiated?

Answer 1

Code-driven changes to element values don’t trigger native events. You can always trigger them yourself, of course, via the jQuery “.trigger()” method.

The Mozilla browsers have long had a “watch” feature, but that’s not supported by other platforms.