如何知道选择框中的可用选项何时更改?

Question

我的页面上有一个选项动态变化的选择框:

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

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

问题是，当添加或删除选项时，我似乎找不到抛出的事件。

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

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是很好的支持除了IE，它没有得到他们直到IE11。但是IE支持旧的突变事件;你可以找到使用旧事件提供新接口的shims/polyfills(或者直接使用旧事件，如果typeof MutationObserver === "undefined")。我不知道当你在一个选择中改变选项时旧的事件是否被IE触发，但是，你需要检查。

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