如何使用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 ie

$(".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.

Answer 1

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 .

Answer 2

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>