如何在 html 和 Javascript 中为给定的下拉字段组从其余下拉列表中禁用选定的下拉列表项

Question

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

更新：

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

Answer 1

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

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。