When choosing an option in the select I have to disable the non-matching selects

I need to disable mismatched selects based on the option of a fixed select.

In particular I have the select 'Flatlist'; in each option of this select I pass a 'data-option' attribute which corresponds to the 'data-select' attribute of the selects with names "cars", "pets", "languages".

The code below works almost fine. I'm having a small problem!

When I try to select a second option from the 'Flatlist' select again, all three selects are disabled, while I want it to have the same behavior as if I clicked on this select the first time.

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>

I hope I have been clear enough in explaining the problem. However the above code is working, easy to understand this problem!

Thanks to those who will help me!

Solution

You need to re-enable the selects that may have been disabled.

You should also disable all of the other selects initially in the HTML. They should only be enabled when the user selects the appropriate option from the first select.

document.getElementById('flatlist').addEventListener('change', function(event) {
  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>