如何用HTML和JavaScript实现同组下拉框选中项在其余下拉框禁用

1. 单组6下拉框基础版实现 #

步骤1：搭建HTML结构 #

给单组下拉框套统一父容器，所有下拉框加统一类名便于识别：

<!-- 单组父容器 -->
<div class="rating-group">
  <select class="rating-select">
    <option value="">请选择分数</option>
    <option value="1">1分</option>
    <option value="2">2分</option>
    <option value="3">3分</option>
    <option value="4">4分</option>
    <option value="5">5分</option>
    <option value="6">6分</option>
  </select>
  <!-- 重复写5个同样的select，单组总共6个 -->
</div>

步骤2：编写核心JS逻辑 #

核心逻辑是同组内已选值仅对当前下拉框开放，其他下拉框的对应选项禁用：

// 获取单组内所有下拉框
const selects = document.querySelectorAll('.rating-group .rating-select')
selects.forEach(select => {
  // 给每个下拉框绑定选择事件
  select.addEventListener('change', (e) => {
    // 1. 收集当前组所有已选的有效值
    const selectedValues = Array.from(selects).map(item => item.value).filter(val => val)
    // 2. 遍历所有下拉框的所有选项，更新禁用状态
    selects.forEach(item => {
      const options = item.querySelectorAll('option')
      options.forEach(opt => {
        if (!opt.value) return // 跳过默认的请选择选项
        // 已选值 + 不是当前下拉框自己选中的值 → 禁用
        opt.disabled = selectedValues.includes(opt.value) && opt.value !== item.value
      })
    })
  })
})

2. 10组场景扩展实现 #

基于你已经给每组外层div设置唯一类名的前提，只要做组间逻辑隔离即可，不需要改动核心判断规则：

优化思路 #

• 不要全局绑定所有下拉框的事件，改为遍历10组父容器，每组单独初始化自己的下拉框事件
• 每次触发选择事件时，只处理当前触发元素所属的组内的下拉框，不影响其他组的状态

示例代码 #

// 获取所有10组的父容器，替换成你自己的父容器类名
const allGroups = document.querySelectorAll('.你的每组外层div的统一类名')
allGroups.forEach(group => {
  // 只拿当前组内的下拉框
  const groupSelects = group.querySelectorAll('.rating-select')
  groupSelects.forEach(select => {
    select.addEventListener('change', () => {
      // 仅收集当前组的已选值
      const selectedValues = Array.from(groupSelects).map(item => item.value).filter(val => val)
      // 仅更新当前组的选项禁用状态
      groupSelects.forEach(item => {
        const options = item.querySelectorAll('option')
        options.forEach(opt => {
          if (!opt.value) return
          opt.disabled = selectedValues.includes(opt.value) && opt.value !== item.value
        })
      })
    })
  })
})

额外优化建议 #

可以给每组加提交校验逻辑，判断当前组6个下拉框是否全部选完，避免用户漏选。 #

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