JavaScript：点击自动完成选项如何获取独立赋值？点击总是取数组最后项

这是前端开发里超常见的闭包陷阱！不管点哪个选项都选中最后一个，本质是所有点击事件处理函数共享了同一个循环变量——等用户点击时，循环早就跑完了，变量已经指向数组最后一个元素，自然每次都选到它。

问题根源 #

假设你原本是这样遍历msg.db生成选项并绑定事件的（类似下面的代码）：

for (var i = 0; i < msg.db.length; i++) {
  var agent = msg.db[i];
  var option = $('<div>' + agent.name + '</div>');
  // 这里的agent会被所有点击事件共享
  option.click(function() {
    console.log("选中的是：", agent.name); // 永远是最后一个名字
  });
  $('#select_box_users').append(option);
}

循环里用var声明的agent属于函数级作用域，所有迭代共享同一个变量。当用户点击选项时，循环已经执行完毕，agent早就指向数组最后一个元素，所以不管点哪个都会触发最后一个的逻辑。

三种实用解决方案 #

1. 用立即执行函数(IIFE)捕获当前元素

通过立即执行函数把每一次循环的agent单独存到独立作用域里，让每个点击事件都引用自己专属的agent：

for (var i = 0; i < msg.db.length; i++) {
  var agent = msg.db[i];
  var option = $('<div class="agent-option">' + agent.name + '</div>');
  
  // 用IIFE把当前agent传入，创建独立作用域
  (function(currentAgent) {
    option.click(function() {
      $('#select_box_users').val(currentAgent.name);
      // 这里可以处理其他逻辑，比如更新缓存或触发回调
    });
  })(agent);
  
  $('#select_box_users').append(option);
}

2. 用ES6的let声明循环变量

如果你的项目支持ES6+，直接用let代替var就搞定——let在循环中会为每一次迭代创建独立的块级作用域，每个迭代的变量都是专属的：

for (let i = 0; i < msg.db.length; i++) {
  let agent = msg.db[i];
  var option = $('<div class="agent-option">' + agent.name + '</div>');
  
  option.click(function() {
    $('#select_box_users').val(agent.name);
  });
  
  $('#select_box_users').append(option);
}

3. 事件委托（更推荐的方式）

把点击事件绑定到父容器#select_box_users上，而不是每个选项。这样不仅避免闭包问题，还能减少事件绑定数量，提升性能：

// 先生成所有选项，给每个选项加data属性存信息
$('#select_box_users').html('');
$.each(msg.db, function(index, agent) {
  // 可以存name或者整个agent的标识（比如id）
  var option = $(`
    <div class="agent-option" 
         data-agent-name="${agent.name}"
         data-agent-id="${agent.id}">
      ${agent.name}
    </div>
  `);
  $('#select_box_users').append(option);
});

// 绑定事件委托到父容器
$('#select_box_users').on('click', '.agent-option', function() {
  var selectedName = $(this).data('agent-name');
  $('#select_box_users').val(selectedName);
  
  // 如果需要获取完整的agent对象，从__cache里查找
  var selectedAgent = __cache.find(item => item.id === $(this).data('agent-id'));
  console.log("选中的完整对象：", selectedAgent);
});

总结 #

这三种方法都能解决你的问题，其中事件委托是最优雅的方案，尤其当选项数量较多时优势更明显。如果环境不支持ES6，就用IIFE的方式。

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