adding an event to catch when a list item is added to a <select> jQuery

Question

I am using jQuery to add an event to a select (multiple) control. The idea is to execute this event when an item is added or removed from the list. I have tried the $("#myselect").change() function but this only throws the event when you select another item in the list. Any help would be greatly appreciated. Thanks in advance!

UPDATE:

HTML (auto generated for this example I put my id)

<select id="myselect" style="width: 143px; height: 125px; overflow: scroll;" ondblclick="GipRemoveSelectedItems(ctl00_ctl19_g_f081466b_5035_4884_b6db_009508a22e1c_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false" onchange="GipSelectResultItems(ctl00_ctl19_g_f081466b_5035_4884_b6db_009508a22e1c_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m);" multiple="multiple" jQuery172007786130460086404="3"/>

jQuery - Inside of $(document).ready()

$("#myselect").change(function() {
    //Does not enter on add or remove of an item
});

Answer 1

You can use DOMSubtreeModified event and check if new element added to DOM. i.e, In your case new option to specific select.

$("#SELECT_ID").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});

DEMO FIDDLE

Answer 2

You can listen to the DOMNodeInserted event and check if the new element is an option into the specific select.

Check: How to call a function in every element in the DOM even if they are dynamically created

Answer 3

Note the current answers have been deprecated in favour of the MutationObserver API.

The correct way is now like so:

$select = $('#myselect')
const observer = new MutationObserver(
    () => { $select.trigger('mutated') }
)
observer.observe($select[0], { childList: true })

Then to do something on the event trigger:

$select.on('mutated', () => { console.log('mutated') })