JavaScript批量创建按钮与列表框，实现独立点击事件方案咨询

这个问题我太熟悉了！循环批量创建元素绑定事件时，最容易踩的就是作用域变量被覆盖的坑，给你三种靠谱的解决方案，都是实战中常用的：

方案1：用闭包保存每个列表框的独立引用 #

闭包能帮我们把每次循环里的列表框单独“存”起来，避免后续循环覆盖变量引用。

// 模拟循环创建5组列表框+按钮
for (var i = 0; i < 5; i++) {
  // 创建列表框并添加示例选项
  var select = document.createElement('select');
  select.id = 'select-' + i;
  for (var j = 0; j < 3; j++) {
    var option = document.createElement('option');
    option.textContent = `列表${i}的选项${j}`;
    select.appendChild(option);
  }
  document.body.appendChild(select);

  // 创建对应按钮
  var button = document.createElement('button');
  button.textContent = `清空列表${i}`;
  
  // 用自执行闭包锁定当前循环的select
  (function(currentSelect) {
    button.onclick = function() {
      DoFunction(currentSelect);
    };
  })(select);
  
  document.body.appendChild(button);
  document.body.appendChild(document.createElement('br'));
}

// 你的清空函数
function DoFunction(selectbox) {
  for(let i = selectbox.options.length - 1; i >= 0; i--) {
    selectbox.remove(i);
  }
}

为什么这能行？因为var声明的变量是函数级作用域，循环结束后所有按钮引用的都是最后一次循环的select。而自执行闭包会为每个按钮创建独立的作用域，把当前循环的select存进currentSelect里，确保点击时能拿到正确的列表框。

方案2：用ES6的let实现块级作用域（推荐） #

如果你的项目支持ES6，这个方法最简洁。let是块级作用域，每次循环都会生成新的变量绑定，直接绑定事件就行：

// 改用let声明循环变量
for (let i = 0; i < 5; i++) {
  let select = document.createElement('select');
  select.id = 'select-' + i;
  
  // 添加示例选项
  for (let j = 0; j < 3; j++) {
    let option = document.createElement('option');
    option.textContent = `列表${i}的选项${j}`;
    select.appendChild(option);
  }
  document.body.appendChild(select);

  let button = document.createElement('button');
  button.textContent = `清空列表${i}`;
  
  // 直接绑定，每个循环的select都是独立的
  button.onclick = function() {
    DoFunction(select);
  };
  
  document.body.appendChild(button);
  document.body.appendChild(document.createElement('br'));
}

function DoFunction(selectbox) {
  for(let i = selectbox.options.length - 1; i >= 0; i--) {
    selectbox.remove(i);
  }
}

这种写法不用额外套闭包，代码更清爽，现在主流浏览器都支持ES6，优先选这个方案。

方案3：用自定义data-*属性关联元素 #

如果不想依赖作用域，还可以给按钮加自定义属性，把对应列表框的ID存进去，点击时通过ID查找元素：

for (var i = 0; i < 5; i++) {
  var select = document.createElement('select');
  select.id = 'select-' + i;
  
  // 添加示例选项
  for (var j = 0; j < 3; j++) {
    var option = document.createElement('option');
    option.textContent = `列表${i}的选项${j}`;
    select.appendChild(option);
  }
  document.body.appendChild(select);

  var button = document.createElement('button');
  button.textContent = `清空列表${i}`;
  // 用data属性存储对应列表框的ID
  button.dataset.targetSelect = select.id;
  
  button.onclick = function() {
    // 通过data属性获取ID，再找到对应的列表框
    var targetSelect = document.getElementById(this.dataset.targetSelect);
    DoFunction(targetSelect);
  };
  
  document.body.appendChild(button);
  document.body.appendChild(document.createElement('br'));
}

function DoFunction(selectbox) {
  for(let i = selectbox.options.length - 1; i >= 0; i--) {
    selectbox.remove(i);
  }
}

这个方法适合元素可能动态修改的场景，缺点是每次点击都要重新查找DOM，但一般情况下性能影响可以忽略。

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