Question

TL; DR

如何在<select>以及更重要的<option>标签中查看标记的更改？

我不想要收听.change()事件（onChange），但我做想要听取任何更改属性（disabled="disabled"），值（value="foo"）或文本。

长版本

我正在为jQuery编写一个简单的<select>替换插件。作为其中一项功能，我希望用选择框动态更新。我坚持的一个功能是如何监视事件，例如另一条JS改变<select>的{{1}}之一，例如，更改它的文本，值或禁用状态

我发现了一个提供解决方案的问题here，但它只是设置<option>来轮询该元素。

是否有一个干净的（我的意思是“不使用setTimeout()”方式来观察元素的修改，特别是下拉选择控件中的setTimeout()？我想要的三个主要内容值得注意的是：

当选项的文字发生变化时。
禁用或启用时。
当它的值发生变化时。

所有这些都是由一块与我正在编写的插件无关的JS触发的。

Answer 1

其他JS片段不一定会触发dom事件，因此事件监听器不会对您有所帮助。事实上，对于你的例子......唯一一个将触发dom事件的是如果值被改变了。你可以为jquery的on()方法编写一些花哨的选择器来检查启用/禁用。

简而言之，setTimeout（或更确切地说是setInterval）可能是您最好的选择。

Answer 2

您可以使用订阅dom子树修改事件，如下所示：

$('select').bind('DOMSubtreeModified', function() {
  if ($(this).is('option')) {
    // Your code here
  }
});

<强>更新

由于对DOMSubtreeModified的支持有点......目前不稳定，让我们给出以下内容（NB未经测试！）：

(function($) {
  var nativeSupport = false;
  var parent = $('<div></div>');
  parent.bind('DOMSubtreeModified', function() {
    nativeSupport = true;
  });
  parent.append($('<div></div>'));
  if (nativeSupport) {
    $.fn.subtreeModified = function(onModified) {
      $(this).bind('DOMSubtreeModified', onModified);
    };
  } else {
    $.fn.subtreeModified = function(onModified) {
      var self = $(this);
      var html = self.html();
      var checkForModifications = function() {
        var currentHtml = self.html();
        if (html !== currentHtml) {
          onModified.apply(self, []);
          html = currentHtml;
        }
      };
      window.setInterval(checkForModifications, 100);
    };
  }
})(window.jQuery);

然后可以这样使用：

$('select').subtreeModified(function() {
    // Your code here
});

Answer 3

您可以收听onChange事件......

<select> </select>的“onModify”事件

TL; DR

长版本

3 个答案: