Select2事件多次触发问题：动态添加的多选下拉框单次操作生成多条日志

你遇到的事件重复触发问题，核心原因是每次.optionsDropDown的change事件触发时，你都给#myid重复绑定了select2:select和select2:unselect事件。随着change事件多次触发，#myid上会累积多个相同的事件监听器，导致每次选择/取消操作时，这些监听器都会执行一遍，就出现了重复日志。

有几种可行的修复方式，推荐优先使用以下两种：

方式1：绑定前先解绑旧的事件监听器 #

在绑定新的事件之前，先用.off()移除之前绑定的同名事件，避免监听器叠加：

$(document).on('change', '.optionsDropDown', function (e) {
  // 先解绑之前的select2事件，再重新绑定
  $('#myid')
    .off('select2:select select2:unselect')
    .on('select2:select', function (e) {
      var data = e.params.data;
      console.log(data)
    })
    .on('select2:unselect', function (e) {
      var data = e.params.data;
      console.log(data)
    })
})

方式2：直接使用事件委托绑定到文档（更适合动态元素） #

既然你的下拉框是动态添加的，完全可以把select2的事件直接委托到document上，不需要嵌套在.optionsDropDown的change事件里，这样只会绑定一次，从根源避免重复：

// 直接委托select2事件到document，适配动态生成的#myid
$(document).on('select2:select', '#myid', function (e) {
  var data = e.params.data;
  console.log(data)
})

$(document).on('select2:unselect', '#myid', function (e) {
  var data = e.params.data;
  console.log(data)
})

// 原来的.optionsDropDown change事件保留你需要的其他逻辑即可
$(document).on('change', '.optionsDropDown', function (e) {
  // 这里写你原本需要在change时执行的其他操作，无需再绑定select2事件
})

非动态添加的下拉框，你应该是页面加载完成后只绑定了一次select2事件，没有重复绑定的过程，所以不会出现监听器叠加的情况。

内容的提问来源于stack exchange，提问作者Ashish Chinchkhede