Html - when I select an option of a select I want the others to have an empty value

Maurice
December 20, 2023
245 views
2 votes
3 Answers

as already mentioned, when I select an option of a select I want the others to have an empty value if one is already selected, i.e. I want the others to have a value="" (therefore that it be emptied"

this is my code:

let selects = document.querySelectorAll('.selectes')
selects.forEach(sel =>
    sel.addEventListener('change', function (e) {
        if (e.target.id != sel.getAttribute('id')) {
            sel.value = '';
        }
    })

)

 <label for="cars">Choose a car:</label>
    <select name="cars" id="cars" class="selectes">
        <option value="">Value Empty</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>

    <label for="cars">Choose a cycle:</label>
    <select name="cars" id="cycles" class="selectes">
        <option value="">Value Empty</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>

    <label for="cars">Choose a bike:</label>
    <select name="cars" id="bikes" class="selectes">
        <option value="">Value Empty</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>

Tags: html javascript

Answers

Get all the select elements, add listener to each select element by looping over them. So whenever a select change, loop through all other select elements and set their values into "Value Empty".

const selects = document.querySelectorAll('.selectes');
selects.forEach(function(select) {
  select.addEventListener('change', function() {
    selects.forEach(function(s) {
      if (s !== select) {
        s.value = '';
      }
    });
  });
});

<label for="cars">Choose a car:</label>
<select name="cars" id="cars" class="selectes">
  <option value="">Value Empty</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<label for="cars">Choose a cycle:</label>
<select name="cars" id="cycles" class="selectes">
  <option value="">Value Empty</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<label for="cars">Choose a bike:</label>
<select name="cars" id="bikes" class="selectes">
  <option value="">Value Empty</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

You need to loop through all the selects within the listener, and reset the ones that aren’t the one that was just changed.

let selects = document.querySelectorAll('.selectes')
selects.forEach(sel =>
    sel.addEventListener('change', function (e) {
        // sel was changed, so reset all the other selects which are not sel.
        selects.forEach(s => {
          if (s !== sel) 
            s.value = '';
        });
    })
)

<label for="cars">Choose a car:</label>
    <select name="cars" id="cars" class="selectes">
        <option value="">Value Empty</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>

    <label for="cars">Choose a cycle:</label>
    <select name="cars" id="cycles" class="selectes">
        <option value="">Value Empty</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>

    <label for="cars">Choose a bike:</label>
    <select name="cars" id="bikes" class="selectes">
        <option value="">Value Empty</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>

Maybe you can do that this way ?

First of all, the forEach() method accepts up to 3 arguments: link on the doc

sel -> the current element
i -> current element list index
All -> a return on the entire processed list

Like any selection made on a list, this acts on the selectedIndex property;
this code here uses this property exclusively.

as any change to one of the selects implies an update of the other selects, they must be reset their selectedIndex to zero in an internal loop of the All argument, this time with x as loop index.

if x===i, then we are on the same element, it is therefore excluded to reset its selectedIndex property to zero.

document.querySelectorAll('.selectes')
  .forEach( (sel, i, all) =>
  {
  sel.addEventListener('change', e => 
    {
    if (sel.selectedIndex > 0)
      all.forEach( (xSel,x) =>  { if (x!==i) xSel.selectedIndex = 0; })
    })
  });

label {
  display : inline-block;
  width   : 10em;
  }

label>select {
  display  : block;
  }

<label>
  Choose a car:
  <select name="cars" id="cars" class="selectes">
    <option value="">Value Empty</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</label>
<label>
  Choose a cycle:
  <select name="cars" id="cycles" class="selectes">
    <option value="">Value Empty</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</label>
<label>
  Choose a bike:
  <select name="cars" id="bikes" class="selectes">
    <option value="">Value Empty</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</label>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – when I select an option of a select I want the others to have an empty value

Answers