应使用 change 事件监听 select 选项变更，因其语义明确、兼容性好；通过 event.target.value 获取选中值并发起请求，推荐 addEventListener 绑定，必要时添加防抖或 AbortController 防重复请求。

下拉选择（<select>）的选项变更，用 change 事件监听最直接可靠。

监听 change 事件触发请求

change 事件在用户手动切换选项并失去焦点（或点击确认）时触发，语义明确、兼容性好，适合绝大多数场景。避免使用 input 或 click，前者在部分浏览器中对 select 不稳定，后者可能误触未生效的点击。

• 给 <select> 元素绑定 change 事件监听器
• 在回调中获取当前选中的值：event.target.value 或 selectElement.value
• 用该值发起请求（如 fetch 或 axios）

HTML 结构示例

确保 select 有 id 或其他可定位方式，方便绑定：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

<select id="category">
  <option value="">请选择分类</option>
  <option value="news">新闻</option>
  <option value="tech">科技</option>
</select>

JavaScript 绑定与请求逻辑

推荐使用 addEventListener，便于解绑和维护：

立即学习“前端免费学习笔记（深入）”；

const select = document.getElementById('category');
select.addEventListener('change', async function (e) {
  const value = e.target.value;
  if (!value) return; // 忽略空选项
  try {
    const res = await fetch(`/api/items?category=${encodeURIComponent(value)}`);
    const data = await res.json();
    renderList(data); // 自定义渲染逻辑
  } catch (err) {
    console.error('请求失败:', err);
  }
});

注意防抖与重复请求

如果选项变更频繁（比如配合搜索筛选），可加简单防抖；若需避免多次快速切换导致请求堆积，可在请求发起前取消上一次未完成的请求（如用 AbortController）。

• 基础场景无需防抖，change 本身已具备“确定后触发”的特性
• 敏感操作（如联动二级下拉）建议加 loading 状态或禁用 select，防止重复提交
• 服务端接口应支持缓存或幂等，减少无效请求压力