选择选项添加或删除事件答案

【问题标题】：Select option is added or removed event选择选项添加或删除事件
【发布时间】：2012-08-30 13:06:22
【问题描述】：

如何检测 SELECT 中是否添加或删除了 OPTION？

我知道这件事：jquery event for when <option>s are added or removed from a <select>

这个选择框是由另一个js控制的，我不能把我自己的函数调用放进去。

我能以某种方式检测到该选项已被另一个 js 删除吗？

【问题讨论】：

您知道如何添加或删除它们吗？有什么可以使用的抽象方法吗？
他们被这个jquery插件texotela.co.uk/code/jquery/select操作
但我不想硬编码站点特定的操作，因为我打算在其他站点上重用代码
@mgalesic 我在下面发布了一个解决方案，可以避免轮询和机器上不必要的无响应/负载。你可能想测试一下。

标签： javascript jquery

【解决方案1】：

您可以尝试为给定的选择元素调用检查函数，使用超时定期检查。

function periodicallyCheckSelect(){
      var jSelect = $(this)
         ,opts = this.options 
         ,prevLen = +jSelect.attr('data-previousLen') || opts.length
         ,isEq = false
         ,isAdded = false
         ,isRemoved = false
         ,state = '';
      isEq = opts.length === prevLen;
      isAdded = opts.length > prevLen;
      isRemoved = opts.length < prevLen;
      state =  isEq ? 'no change' 
               : isAdded ? opts.length-prevLen + ' option(s) added' 
               : prevLen-opts.length+' option(s) removed';
      jSelect.attr('data-previousLen',opts.length);
      log(state+'<br>');
}

这是一个jsfiddle 玩弄这个想法。

【讨论】：

我喜欢这个解决方案。我将检查页面上是否存在选择框，如果存在则开始检查更改

【解决方案2】：

尝试浏览Mutation events

【讨论】：

【解决方案3】：

如何修补元素上的附加功能？示例：

var obj = document.getElementById('#select');
obj.__appendChild = obj.appendChild;
obj.appendChild = function(){
    console.log('new option added');
    obj.__appendChild.apply(obj, arguments); 
}

【讨论】：

@mgalesic 上述解决方案避免了轮询和机器上不必要的无响应/负载。您可能想要测试覆盖方法。