我如何知道 select 框中的可用选项何时更改

Question

我的页面上有一个 select 框，其中的选项会动态变化。

<select size="6" multiple="multiple" >
    <option value="1">Id</option>
    <option value="2">Subject</option>
    <option value="3">Status</option>
    <option value="4">Assignment</option>
    <option value="5">LastCreatedBy</option>
</select>

当它改变时，我想根据显示的选项刷新屏幕上其他地方的一些文本。

问题是我似乎找不到添加或删除选项时引发的事件。

当 select 框中的选项数量发生变化时，如何通知我。

Answer 1

您可以使用 MutationObserver 来观察 select 元素的内容变化：

var ob = new MutationObserver(function() {
  snippet.log("Changed");
});
ob.observe(document.getElementById("foo"), {
  subtree: true,
  childList: true
});
setTimeout(function() {
  document.getElementById("foo").options.add(new Option("Hi"));
}, 100);

<select id="foo"></select>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

MutationObserver 是 well-supported except for IE, which didn't get them until IE11. But IE supported the old mutation events；您可以找到 shims/polyfills 使用旧事件来提供新界面（或者如果 typeof MutationObserver === "undefined" 则直接使用旧事件）。我不知道当您更改 select 中的选项时，IE 是否触发了旧事件，不过，您需要检查一下。

如果没有 MutationObserver 并且突变事件不起作用，作为最后的手段，请轮询。每 50 毫秒左右轮询一次应该不会对页面性能产生任何重大影响。

我如何知道 select 框中的可用选项何时更改

How can I know when the available options in a select box changes

html

javascript

jquery

javascript-events