对于给定的一组下拉字段，如何在 html & Javascript 中禁用其余下拉列表中的选定下拉列表项

Question

我有一组 6 个下拉字段。每个字段都有 select 选项 1 到 6，我想要的是如果用户 selects 例如，第一个下拉字段中的 1，则选项 1 在其余 5 个中被禁用字段（我们正在从 1 到 6 的用户收集数据）。基本上任何给定的下拉选项只能在 6 个字段中 selected 一次。如何在 HTML 和 JavaScript 中实现此目的？我只需要有关如何开始的指示。

更新：

所以这个解决方案适用于我的 6 个问题，现在我们有 10 组，每组 6 个问题，我为 10 个 div 中的每一个分配了一个唯一的 class 这样我就可以遍历所有 10 个设置并实现此功能。我现在正在研究一个解决方案来实现它，如果有人有指点 - 他们将不胜感激，否则如果我做对了我会更新解决方案。

Answer 1

您可以将事件侦听器附加到 select 标签，以禁用其他选项；例如：

const selectList = document.getElementsByTagName("select")

for (let i = 0; i < selectList.length; i++) {
    selectList[i].addEventListener('change', (event) => disabler(event))
}

function reset() {
    for (let i = 0; i < selectList.length; i++) {
    for (let k = 0; k < selectList[i].length; k++) {
      selectList[i][k].disabled = false;
    }
  }
}

function disabler(event) {

  reset();

    for (let i = 0; i < selectList.length; i++) {

    selectedValue = selectList[i].value;

    for (let j = 0; j < selectList.length; j++) {

      for (let k = 0; k < selectList[j].length; k++) {
        if (selectList[j][k].value === selectedValue) {
          selectList[j][k].disabled = true;    
        }
      }
    }
  }
}

function submitValue() {
  const values = [];

  for (let i = 0; i < selectList.length; i++) {
      values.push(Number(selectList[i].value));
  }
  
  console.log(values)
}

<form id="form">
<select>
  <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> 
<select>
  <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> 
<select>
  <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> 
<select>
  <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> 
<select>
  <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> 
<select>
  <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>  
<input type="button" value ="Submit" onclick="submitValue()"></button>
</form>

这有一个错误，因为您不能移动值，但可以用作 POC。

对于给定的一组下拉字段，如何在 html & Javascript 中禁用其余下拉列表中的选定下拉列表项

How to disable a selected dropdown list item from the rest of the dropdowns, for a given group of dropdown fields, in html & Javascript

html

javascript

drop-down-menu