TL;DR
How can I watch for changes in markup in <select> and, more importantly, <option> tags?
I don’t want to listen for the .change() event (onChange), but I do want to listen for any changes in attributes (disabled="disabled"), values (value="foo") or text.
The long version
I’m writing a simple <select> replacement plugin for jQuery. As one of the features, I’d like it to dynamically update with the select box. The one feature I’m stuck with is how to watch for events such as another piece of JS changing one of the <select>‘s <option>s by, for example, changing it’s text, value or disabled state.
I’ve found a question here that provides a solution, however it just sets up a setTimeout() to poll the element.
Is there a clean (by which I mean "not using setTimeout()) way of watching for modifications of elements, specifically the <option>s inside a dropdown select control? The three main things I want to watch for are:
- When the text of the option is changed.
- When it is disabled or enabled.
- When it’s value is changed.
All of these triggered by a piece of JS not related to the plugin I’m writing.
Other JS snippets won’t necessarily fire a dom event, so event listeners aren’t going to help you much. In fact, for your examples… the only one that will ever fire a dom event is if the value is changed. You could write some fancy selectors for jquery’s
on()method to check enabled/disabled, though.In short, the setTimeout (or rather setInterval) may be your best bet.