How to detect option content change in dropdown using jquery?

Question

I have a dropdown field, options of which will be changed dynamically. Is there a way to capture the event, whenever the set of options inside the dropdown is changed?

I do not want to capture the option change i.e

$(".dropdown").on("contentChange", function(){
    //do something
})

Rather, I want to capture the event, when the set of options inside the dropdown gets modified. How can i attach a handler, which will get trigger functions when option set changes.

You could use a Mutation Obeserver to check when the DOM within the `select` changes but that's not well supported in older browsers. Alternatively you could just `trigger()` your own event when you change the options yourself. — Rory McCrossan, Sep 12 '16 at 07:30
try with $(document).on("change", ".dropdown", function(){}); which will trigger for dynamically changing values — AB Udhay, Sep 12 '16 at 07:31
@ABUdhay that's for changing the selected value, not for changing the content of the select element itself - as the OP even states himself. — Rory McCrossan, Sep 12 '16 at 07:31
How are the options changing dynamically ? Probably you could do something in that code — Ish, Sep 12 '16 at 07:34
I can add it in code that changes the option, but I wanted to explore if there are any options available for this — Vignesh Subramanian, Sep 12 '16 at 08:07

Maciej Sikora · Accepted Answer · 2016-09-12T08:57:19.633

It is possible to watch DOM changes, in newset DOM specification we have MutationObserver to observe DOM. Working exampe

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

//create observer
var observer = new MutationObserver(function(mutations, observer) {
    
     console.log("Options have been changed");

});

//set to observe childs ( options )
observer.observe(document.querySelector(".dropdown"), {
  subtree: true,
  childList:true,
  attributes:true
});

//test change
$('button').on("click",function(){

  $(".dropdown").prepend("<option>New added option</option>");
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropdown">
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
  <option>Fourth</option>
</select>  
<button>Test button options change</button>

You can use also event DOMSubtreeModified. Event work on major browsers but is DEPRECATED . Working example:

//add event    
$(".dropdown").on("DOMSubtreeModified", function(e){

  console.log('Options have been changed');

});

//change option example after button click
$('button').on("click",function(){

  $(".dropdown").prepend("<option>New added option</option>");
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropdown">
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
  <option>Fourth</option>
</select>  
<button>Test button options change</button>

I added some example options modification after button click. Event will be called on any DOM change inside select.

[Why is the DOMSubtreeModified event deprecated in DOM level 3?](http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3) — Mohammad, Sep 12 '16 at 08:22
@Mohammad article has 5 years and event is currently working with all major browsers. I think for his question it is good answer. — Maciej Sikora, Sep 12 '16 at 08:30
@MaciejSikora the SO answer might be 5 years old but you should look at the specs (https://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified) where it is officially stated that it is deprecated. — Gabriele Petrioli, Sep 12 '16 at 08:33

Mohammad · Answer 2 · 2016-09-12T07:47:04.660

You can add your custom event to DOM document and simulte it when content change using jquery .trigger().

$("button").click(function(){
    $("select > option:first").text("A1").trigger("contentChange");
});

$("select > option").on("contentChange", function(){
    console.log("Content changed");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change content</button>
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

How to detect option content change in dropdown using jquery?

2 Answers2

Linked