javascript - 如何使用 jquery 检测下拉列表中的选项内容变化？

Question

我有一个下拉字段，其中的选项将动态更改。每当下拉列表中的选项集发生变化时，有没有办法捕获事件？

我不想捕获选项更改即

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

相反，当下拉列表中的选项集被修改时，我想捕获事件。我如何附加一个处理程序，它会在选项集更改时获得触发函数。

Answer 1

可以观察 DOM 的变化，在新的 DOM 规范中我们有 MutationObserver 来观察 DOM。工作实例

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>

您还可以使用事件 DOMSubtreeModified。事件在主要浏览器上有效，但 DEPRECATED 。工作示例:

//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>

我在单击按钮后添加了一些示例选项修改。 select 内的任何 DOM 更改都会调用事件。