JavaScript - how to detect a programmatic value change on a select element (dropdown)

Question

In JavaScript, I need to detect when the value of a certain select element has changed for any reason, including programmatically.

The onchange event i

Answer 1

var targetSelect = $('appropriate selector');
var lastVal = targetSelect.val();

setInterval(function() {
    var newVal = targetSelect.val();
    if(newVal !== lastVal) {
        // it changed, fire an event or process it
    }
    lastVal = newVal;
}, intervalSpacing);

The lower the value you pass to 'intervalSpacing' the more CPU time you spend, but the sooner you realize it changed. Tune cautiously.

Answer 2

You can use the MutationObservers API to watch for changes to the DOM:

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

You might have to actually observe the option nodes for the selected attribute, instead of watching the parent select node, but it should be just as easy.