Html Question posted in
Some basic documentation can be found here.

Html – 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!

Tags:

2

Answers


  1. 0

    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() {
  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>
    Login or Signup to reply.
  2. 0

    You need to add the event to the function(event) part and a bit more.

    You probably want to enable if you chose again so I added some events for enable/disable and there is no onchange="changeSelect()" so I removed that.

    const eventDMe = new Event("disableMe");
const eventEMe = new Event("enableMe");
const selContainer = document.body.querySelector('.selects-container');
const selectThings = selContainer.querySelectorAll('select.selects');
selectThings.forEach((selT) => {
  selT.addEventListener("disableMe", disableSelect);
  selT.addEventListener("enableMe", enableSelect);
});

function disableSelect(event) {
  event.target.value = "";
  event.target.disabled = true;
}

function enableSelect(event) {
  event.target.value = "";
  event.target.disabled = false;
}

document.getElementById('flatlist')
  .addEventListener('change', function(event) {
    // related: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
    let myChoiceData = event.target.options[event.target.selectedIndex].dataset.optiontarget;
    //ref delegation: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation 
    const selContainer = document.body.querySelector('.selects-container');
    const selectThings = selContainer.querySelectorAll('select.selects');
    Array.from(selectThings).forEach(selE => {
      selE.dispatchEvent(eventEMe);
    });
    const chosenFew = Array.from(selectThings)
      .filter(sel => sel.dataset.select != myChoiceData);
    chosenFew.forEach(few => {
      few.dispatchEvent(eventDMe);
    });
  });
    <label for="flatlist">Flatlist:</label>
<select name="flatlist" id="flatlist">
  <option value="">--Please choose an option--</option>
  <option data-optiontarget="car" value="choosecars">I choose the select cars</option>
  <option data-optiontarget="pet" value="choosepets">I choose the select pets</option>
  <option data-optiontarget="language" value="chooselanguages">I choose the select languages</option>
</select>
<div class="selects-container">
  <label for="cars">Choose a car:</label>
  <select data-select="car" name="cars" id="cars" class="selects">
    <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">
    <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">
    <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>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search