Question

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

我不想捕捉期权变更，即

' '

相反，我希望捕获事件，当下拉列表中的选项集被修改时。如何附加处理程序，当选项集更改时将获取触发器函数。

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 。主要浏览器上的活动工作但已弃用。工作示例：

//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更改中调用事件。

Answer 2

您可以将custom event添加到DOM文档中，并在使用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>

如何使用jquery检测下拉列表中的选项内容更改？

2 个答案: