如何在多选下拉框完成选择后才调用Ajax/Javascript函数？

你可以通过以下几种方式实现“用户完成选择后再发起Ajax请求”的需求，根据使用场景选择合适方案：

方案1：使用blur事件（失去焦点时触发） #

当用户点击下拉框以外区域，下拉框失去焦点时，再获取选中值并发起请求，适合用户选完选项后点击页面其他地方的场景：

const getValues = (select) =>
  Array.from(select.selectedOptions, ({ value }) => value);

const fetchData = (select) => {
  const values = getValues(select);
  if (values.length > 0) {
    console.log("完成选择，发起请求", values);
    // 这里执行Ajax请求逻辑
  }
};

const selectElement = document.getElementById("locations");
selectElement.addEventListener("blur", ({ target }) => {
  fetchData(target);
});

方案2：添加确认按钮（手动触发） #

在下拉框旁新增确认按钮，让用户选完后手动点击触发请求，这种方式最直观，完全避免误触发：

<select id="locations" multiple="multiple">
   <option value="1">United States of America</option>
   <option value="3">United Kingdom</option>
   <option value="5">France</option>
</select>
<button id="confirmSelect">确认选择</button>

const getValues = (select) =>
  Array.from(select.selectedOptions, ({ value }) => value);

const fetchData = () => {
  const selectElement = document.getElementById("locations");
  const values = getValues(selectElement);
  if (values.length > 0) {
    console.log("确认选择，发起请求", values);
    // 这里执行Ajax请求逻辑
  }
};

document.getElementById("confirmSelect").addEventListener("click", fetchData);

方案3：防抖函数（延迟触发） #

设置一段延迟时间（比如500ms），用户停止操作（不再选择选项）后自动触发请求，适合用户快速连续多选的场景：

const getValues = (select) =>
  Array.from(select.selectedOptions, ({ value }) => value);

// 防抖函数实现
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

const fetchData = ({ target }) => {
  const values = getValues(target);
  console.log("停止选择，发起请求", values);
  // 这里执行Ajax请求逻辑
};

const debouncedFetch = debounce(fetchData, 500); // 设置500ms延迟

document
  .getElementById("locations")
  .addEventListener("change", debouncedFetch);

各方案对比 #

• blur事件：无需额外UI，依赖用户点击外部触发，适合简单场景。
• 确认按钮：用户操作明确，无意外触发，适合需要精准控制的场景。
• 防抖函数：自动识别用户操作结束，体验流畅，适合高频操作场景。

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