多选select框关闭后触发AJAX请求的实现方案咨询

我之前也遇到过这个问题！原生多选<select>的change事件确实会在每选中或取消一个选项时就触发，完全不是我们想要的「选完再请求」的效果。这里给你两个实用的解决方案，按需选择：

当用户完成选择、点击页面其他区域或者用键盘离开select时，控件会失去焦点（触发blur事件），这时候我们再检查选项是否有变化，有变化就发起AJAX请求：

// 先保存初始选中的选项值，用来后续对比
let lastSelected = $('#selectBoxId').val() || [];

$('#selectBoxId').on('blur', function() {
  const currentSelected = $(this).val() || [];
  
  // 对比当前和上次的选中值，只有变化了才发请求
  if (JSON.stringify(currentSelected) !== JSON.stringify(lastSelected)) {
    $.ajax({
      url: '/filter',
      dataType: 'script',
      data: { selectedOptions: currentSelected } // 把选中的选项传给后端
    });
    
    // 更新保存的选中值，下次对比用
    lastSelected = currentSelected;
  }
});

这个方案的优势：

• 兼容鼠标和键盘操作（比如用Tab键切换离开select）
• 避免无意义的请求（如果用户打开下拉又没改选项就关闭，不会触发请求）
• 实现简单，不需要额外依赖

如果担心用户在短时间内快速切换选项，blur可能不够灵活，可以用延迟触发的方式：当用户停止操作一段时间（比如300ms）后再发起请求，同时结合focus状态判断是否在选择中：

let debounceTimer;
let isSelectFocused = false;

$('#selectBoxId')
  .on('focus', function() {
    isSelectFocused = true;
  })
  .on('blur', function() {
    isSelectFocused = false;
    // 失去焦点后立即检查是否需要请求
    clearTimeout(debounceTimer);
    triggerAjaxIfChanged();
  })
  .on('change', function() {
    // 如果select还处于聚焦状态（下拉框打开），延迟触发
    if (isSelectFocused) {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(triggerAjaxIfChanged, 300);
    }
  });

function triggerAjaxIfChanged() {
  const currentSelected = $('#selectBoxId').val() || [];
  const lastSelected = $('#selectBoxId').data('lastSelected') || [];
  
  if (JSON.stringify(currentSelected) !== JSON.stringify(lastSelected)) {
    $.ajax({
      url: '/filter',
      dataType: 'script',
      data: { selectedOptions: currentSelected }
    });
    
    $('#selectBoxId').data('lastSelected', currentSelected);
  }
}

这个方案适合需要处理快速选择的场景，不过相对复杂一些，一般方案1就足够覆盖大多数需求了。

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