联动下拉组合框异常：点击年份后重复触发yearClick函数求助

听起来你遇到了事件重复绑定的典型问题——每次调用GetYears填充年份列表时，都给每个年份<li>元素绑定了一次yearClick事件处理函数，当GetYears被多次执行（比如每次点击年份后又重新加载年份列表），同一个<li>就会被绑定多个事件，点击一次就会触发多次yearClick。另外，也有可能是你没有用事件委托，而是在循环中错误地处理了事件绑定逻辑。

下面给你几个具体的修复方案：

方案1：使用事件委托（推荐） #

事件委托是最稳妥的方式，只需要给年份列表的父元素（比如<ul id="year-list">）绑定一次事件，不管列表内容怎么更新，都不需要重复绑定事件。这样从根源上避免重复绑定的问题。

在页面初始化的时候添加这段代码（只需要执行一次，不要放在GetYears函数里）：

// 给年份列表的父元素绑定点击事件
document.querySelector('#year-list').addEventListener('click', function(e) {
  // 确保点击的是年份li元素
  if (e.target && e.target.classList.contains('year-li')) {
    // 调用yearClick，把this指向被点击的li，和直接绑定在li上的效果一致
    yearClick.call(e.target);
  }
});

然后移除GetYears函数中给单个<li>绑定click事件的代码，这样不管GetYears执行多少次，都不会重复绑定事件。

方案2：清理旧事件后再绑定（适合不能用事件委托的场景） #

如果你因为某些原因必须给每个<li>单独绑定事件，那每次绑定前要先移除旧的事件处理函数，避免重复绑定。修改GetYears中的事件绑定逻辑：

function GetYears() {
  // 生成年份li的代码...比如：
  const yearList = document.querySelector('#year-list');
  yearList.innerHTML = ''; // 先清空旧列表
  
  // 循环生成li
  years.forEach(year => {
    const li = document.createElement('li');
    li.className = 'year-li';
    li.textContent = year;
    yearList.appendChild(li);
  });
  
  // 绑定事件前先移除旧事件，再添加新事件
  document.querySelectorAll('.year-li').forEach(li => {
    li.removeEventListener('click', yearClick);
    li.addEventListener('click', yearClick);
  });
}

注意：这个方案要求yearClick是命名函数，不能是匿名函数，否则无法用removeEventListener移除。

额外排查点 #

检查你的yearClick函数中是否有调用GetYears的代码——如果有的话，会形成循环：点击年份→触发yearClick→调用GetYears重新生成年份列表→再次绑定事件→下次点击触发次数翻倍。如果有这种逻辑，一定要移除，年份列表应该只在需要的时候加载一次，而不是每次点击年份都重新加载。

按照上面的方案修改后，点击年份就只会触发一次yearClick函数，既可以正常追加年份到弹出框，也能正确加载品牌列表啦。

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