在选择中选择一个选项时，我必须禁用不匹配的选择

Question

我需要根据固定选择的选项禁用不匹配的选择。

特别是我选择了“Flatlist”；在此选择的每个选项中，我传递一个“数据选项”属性，该属性对应于名称为“汽车”、“宠物”、“语言”的选择的“数据选择”属性。

下面的代码几乎可以正常工作。我遇到一个小问题！

当我尝试再次从“平面列表”选择中选择第二个选项时，所有三个选择都被禁用，而我希望它具有与我第一次单击此选择相同的行为。

document.getElementById('flatlist').addEventListener('change', function () {
    let attribute_select = event.target.options[event.target.selectedIndex].getAttribute("data-option");

    document.querySelectorAll('.selects').forEach(sel => {
        if (sel.getAttribute('data-select') !== attribute_select) {
            sel.value = "";
            sel.disabled = true;
        }
    })
});

<label for="flatlist">Flatlist:</label>
    <select name="flatlist" id="flatlist">
        <option value="">--Please choose an option--</option>
        <option data-option="car" value="choosecars">I choose the select cars</option>
        <option data-option="pet" value="choosepets">I choose the select pets</option>
        <option data-option="language" value="chooselanguages">I choose the select languages</option>
    </select>

    <label for="cars">Choose a car:</label>
    <select data-select="car" name="cars" id="cars" class="selects" onchange="changeSelect()">
        <option value="">--Please choose an option--</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>

    <label for="pet-select">Choose a pet:</label>
    <select data-select="pet" name="pets" id="pet-select" class="selects" onchange="changeSelect()">
        <option value="">--Please choose an option--</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
        <option value="parrot">Parrot</option>
        <option value="spider">Spider</option>
        <option value="goldfish">Goldfish</option>
    </select>

    <label for="lang">Language</label>
    <select data-select="language" name="languages" id="lang" class="selects" onchange="changeSelect()">
        <option value="">--Please choose an option--</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
    </select>

我希望我已经足够清楚地解释了这个问题。不过上面的代码是有效的，很容易理解这个问题！

感谢那些帮助我的人！

Answer 1

您需要重新启用可能已禁用的选择。

您还应该最初在 HTML 中禁用所有其他选择。仅当用户从第一个选择中选择适当的选项时才应启用它们。

document.getElementById('flatlist').addEventListener('change', function() {
  let attribute_select = event.target.options[event.target.selectedIndex].dataset.option;

  document.querySelectorAll('.selects').forEach(sel => {
    if (sel.getAttribute('data-select') !== attribute_select) {
      sel.value = "";
      sel.disabled = true;
    } else {
      sel.disabled = false;
    }
  })
});

function changeSelect() {}

<label for="flatlist">Flatlist:</label>
<select name="flatlist" id="flatlist">
  <option value="">--Please choose an option--</option>
  <option data-option="car" value="choosecars">I choose the select cars</option>
  <option data-option="pet" value="choosepets">I choose the select pets</option>
  <option data-option="language" value="chooselanguages">I choose the select languages</option>
</select>
<br>
<br>
<label for="cars">Choose a car:</label>
<select data-select="car" name="cars" id="cars" class="selects" onchange="changeSelect()" disabled>
  <option value="">--Please choose an option--</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<label for="pet-select">Choose a pet:</label>
<select data-select="pet" name="pets" id="pet-select" class="selects" onchange="changeSelect()" disabled>
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>
<br>
<label for="lang">Language</label>
<select data-select="language" name="languages" id="lang" class="selects" onchange="changeSelect()" disabled>
  <option value="">--Please choose an option--</option>
  <option value="javascript">JavaScript</option>
  <option value="php">PHP</option>
  <option value="java">Java</option>
  <option value="golang">Golang</option>
  <option value="python">Python</option>
  <option value="c#">C#</option>
  <option value="C++">C++</option>
  <option value="erlang">Erlang</option>
</select>