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
});

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
});

• javascript
• jquery
• html

• 4 Please post a complete code example. – j08691 Commented Sep 11, 2013 at 16:44
• how do you add option to the select element? – A. Wolff Commented Sep 11, 2013 at 16:45
• Seems like you are looking for this: custom events in jQuery – Evan Davis Commented Sep 11, 2013 at 16:46
• Just updated and before rating let me edit the question... I didnt post everything because of the simple fact that im not handling the html part i just need to know jquerys function to catch those events... – Orlando Commented Sep 11, 2013 at 16:54
• @A.Wolff Its a Sharepoint site so sharepoint does this for you. Pretty much the client asked to add functionality that isnt necesarily supported and to rework the whole form is to much for what the client wants so im trying to work around this with a hack... :( – Orlando Commented Sep 11, 2013 at 17:03

3 Answers 3

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

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

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') })