如何通过按钮和字符串变量切换两个下拉列表的事件监听器绑定与移除

问题根因 #

• 你调用removeEventListener移除change事件时，传入的回调是myFunction，但初始绑定change事件用的是匿名函数，两者引用不匹配，无法成功移除原有监听。
• 仅修改ites变量的值不会自动迁移事件监听，你需要手动完成旧元素监听移除、新元素监听绑定的完整流程。
• 代码中dropDownChangedOne未声明直接赋值，会隐式创建全局变量，存在污染风险。

修复代码 #

JavaScript 部分 #

let ites = 'my-select';
// 把下拉变更回调抽成具名函数，保证添加/移除监听时引用一致
let dropDownChangedOne = false;
function handleDropDownChange() {
  dropDownChangedOne = true;
  console.log(dropDownChangedOne);
  console.log(ites);
}

function myFunction() {
  // 先移除旧元素上的监听
  document.getElementById(ites).removeEventListener('change', handleDropDownChange);
  // 更新绑定的元素id
  ites = 'my-select-one';
  // 给新元素绑定相同监听
  document.getElementById(ites).addEventListener('change', handleDropDownChange);
  console.log('当前绑定的下拉列表id：', ites);
  // 如果需要按钮仅生效一次，可取消下行注释
  // this.onclick = null;
}

// 初始绑定第一个下拉列表的监听
document.getElementById(ites).addEventListener('change', handleDropDownChange);

HTML 部分无需修改，和你原有代码保持一致即可。 #

修改说明 #

1. 把原本的匿名变更回调抽成了具名函数handleDropDownChange，保证添加和移除监听时使用的是同一个函数引用，能正常移除监听。
2. 按钮点击逻辑中补充了「给新下拉列表绑定监听」的步骤，修改ites后主动完成绑定迁移。
3. 提前声明了dropDownChangedOne变量，避免隐式全局变量问题。
4. 可选添加按钮点击失效逻辑，避免重复点击反复迁移监听。

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