使用 jQuery 检测 select 字段选项值的变化

Question

是否有一种事件绑定方式可以识别 select 字段的选项何时被某些不同的、外部的、不可编辑的 JavaScript 更改？

澄清一下：我不想听值变化，我想听 DOM 结构的变化

Answer 1

你试过吗？

这只会告诉您结构是否有任何变化。

$(".selectBox").bind("DOMSubtreeModified", function() 
{
    $(".message").append("Structure changed<br>");
});


$("#add").click(function() 
{
    $(".selectBox").append("<option>Added</option>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<button id="add">Add to Select</button>


<select class="selectBox">


</select>


<div class="message"></div>

如果您正在寻找数据或属性之类的东西。那么您可能会寻找类似 MutationObserver

的内容

MutationObserver provides developers a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification.

Answer 2

寻找 "DOM Changes" 的范围太广了。正如您的评论所指出的，您正在 select 列表中使用级联 LOV 父项功能。这会将 select 列表变成一个可刷新的项目，这意味着当其中一个父项目发生更改时，它将再次获得其选项集。此刷新基本上是一个 AJAX 调用。
由于这都是内置的，您可以非常简单地使用将事件处理程序绑定到此项的 "after refresh" 的本机功能。不需要开始监听 dom 事件。 "After refresh" 是处理此问题的标准方法。

两个选项：

使用对 "After Refresh" 事件做出反应的动态操作
使用事件监听器绑定到 "apexafterrefresh" 事件或 jQuery
```
$("#P1_SELECT_LIST").on("apexafterrefresh", function(){ ... });
```

从那以后你可以做任何你想做的事，但这当然是正确的方式。

使用 jQuery 检测 select 字段选项值的变化

Detect change of option values of an select field using jQuery

javascript

jquery

oracle-apex

jquery-events