我如何知道选择框中的可用选项何时更改答案

【问题标题】：How can I know when the available options in a select box changes我如何知道选择框中的可用选项何时更改
【发布时间】：2015-07-27 05:50:45
【问题描述】：

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

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

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

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

如何在选择框中的选项数更改时通知。

【问题讨论】：

您在 js 中添加了这些选项对吗？你不能在那之后调用一个函数吗？
是什么导致选项被添加或删除？（提示：你的代码。这就是“事件”）
@Amit - 是的，不幸的是，我实际上无法解决这个问题。它位于多个位置，由自定义 ASP.NET 网络表单控件生成，我无法修改该控件，也无法访问事件。
@Diskdrive - 幸运的是，T.J Crowder 给了你一个很好的答案（你应该接受它）。但是 - 我会查看 ASP.NET 控件以获取更多信息。这就是事件的来源，如果设计得当，它应该会生成事件/挂钩供您使用。您所描述的就像坐在水龙头下等待弄湿以知道旋钮已转动（尴尬，设计不佳）。话虽如此，有时你别无选择，你必须弄湿:-)
@Amit - 是的，现在正在测试它。担心它不能在 ie 8 上运行，不幸的是，我的应用程序正在运行:(

标签： javascript jquery html javascript-events

【解决方案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 除了 IE，它直到 IE11 才得到它们。但是IE支持old mutation events；你可以找到使用旧事件来提供新接口的 shims/polyfills（或者如果 typeof MutationObserver === "undefined" 直接使用旧事件）。我不知道当您更改选择中的选项时，IE 是否触发了旧事件，不过，您需要检查一下。

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

【讨论】：

谢谢，我最终只使用了轮询选项。我必须支持 IE 8 并且旧的突变事件似乎已经过时了。所以我可能更容易进行轮询，然后在我们结束支持时转移到 MutationObserver
@Diskdrive：可能，是的。是的，旧的突变事件显然是引擎的一个巨大的性能问题，因此MutationObserver。（我不知道那个细节......）