本文介绍如何通过原生 JavaScript 实现多个 元素之间的单选互斥行为：当用户在任一 select 中选择选项时，其余所有 select 自动重置为默认空值（value=""）。

本文介绍如何通过原生 javascript 实现多个 `` 元素之间的单选互斥行为：当用户在任一 select 中选择选项时，其余所有 select 自动重置为默认空值（`value=""`）。

在表单设计中，有时需要模拟“单选组”的语义——尽管 本身不支持 name 属性的 radio 式互斥，但可通过 JavaScript 手动协调多个下拉框的行为。核心逻辑是：监听每个 .selectes 元素的 change 事件，一旦触发，遍历所有同类 select，并将非当前触发元素的 value 设为空字符串 ''。

以下为推荐实现代码（简洁、健壮、无冗余判断）：

const selects = document.querySelectorAll('.selectes');
selects.forEach(select => {
  select.addEventListener('change', () => {
    selects.forEach(s => {
      if (s !== select) {
        s.value = '';
      }
    });
  });
});

✅ 关键说明：

Reachout.ai

一款面向销售团队的 AI 视频触达与营销工具，通过个性化视频内容辅助企业开展客户开发和销售沟通，提高潜在客户触达效率。

下载

• 使用 s !== select 进行严格引用比较（而非 ID 字符串匹配），避免因 DOM 重建或动态 ID 变更导致逻辑失效；
• s.value = '' 会自动选中第一个 value="" 的 （即“Value Empty”项），无需手动调用 s.selectedIndex = 0；
• 所有 select 必须包含至少一个 value="" 的默认选项，否则设为空值后界面可能显示异常（如保留旧文本但无对应 option）；
• 不建议使用 e.target.id != sel.getAttribute('id') 这类字符串比对——既低效又易出错（如 ID 未设置、重复或含空格）。

⚠️ 注意事项：

• 若 select 支持多选（multiple 属性），此逻辑仍适用，但实际场景中互斥通常仅用于单选下拉；
• 如需兼容旧版 IE（
• 若后续动态添加新的 .selectes 元素，需重新绑定事件或改用事件委托（但注意 change 事件不冒泡，委托不可行，建议封装为初始化函数并显式调用）。

该方案轻量、可复用，适用于任何数量的同组 select，是构建清晰表单交互的实用技巧。