How can I hide multiple options from the select tag with javascript and class

Question

Please I need help in hiding particular options from select tag based on a particular condition with javascript and class. Here is my code

 <select>
    <option class="dis">Cat</b></option>
    <option class="dis">Dog</option>
    <option class="dis">Snake</option>
    <option class="dis">Ostrich</option>
    <option class="dis">Lion</option>
 </select>

Here is the Javascript

var elements = document.getElementsByClassName("dis");
    doIt(elements, false);

function doIt(elements, status) {
    for (var i = 0; i < elements.length; i++) {
        elements[i].disabled = status;
    }
}

Using classes and arrays how can I hide the above options instead of disabling them?

Does this answer your question? [Hide select options with JavaScript](https://stackoverflow.com/questions/4398966/how-can-i-hide-select-options-with-javascript-cross-browser) — devlin carnate, May 21 '21 at 21:43
If all options have the same class, why not put the class on the `select` and hide that element? — devlin carnate, May 21 '21 at 21:44

score 0 · Answer 1 · answered May 21 '21 at 22:44

you can do somthing like that...

(function () {
  document.querySelectorAll('select.dis').forEach(sd=>
    {
    sd.htmlOps = sd.innerHTML
    sd.status = false
    sd.doIt = function(status)
      {
      if (sd.status !== status)
        {
        if (status) sd.length = 0
        else        sd.innerHTML = sd.htmlOps
        sd.status = status
        } 
      }
    }) 
  }
)()

const mySelect = document.getElementById('my-select')

btShow.onclick = () => mySelect.doIt(false)
btHide.onclick = () => mySelect.doIt(true)

<button id="btHide">hide</button>
<button id="btShow">show</button>
<br><br>
<select id="my-select" class="dis" >
  <option value="a">Cat</option>
  <option value="b">Dog</option>
  <option value="c">Snake</option>
  <option value="d">Ostrich</option>
  <option value="e">Lion</option>
</select>

crg · Answer 2 · 2021-05-21T22:04:10.057

Here is a short way to remove whatever options you want

 // Remove Cat option
 document.getElementById('select').remove(0);

<select id="select">
    <option class="dis">Cat</b></option>
    <option class="dis">Dog</option>
    <option class="dis">Snake</option>
    <option class="dis">Ostrich</option>
    <option class="dis">Lion</option>
 </select>

If you want to keep only the two first options use a boucle like I do in the code bellow.

And if you'd like to add your option back adapte the exemple I gave using .add(option)

const select =  document.getElementById('select')
for (i = select.length - 1; i >= 2; i--) {
    select.remove(i);
}

function add() {
  var option = document.createElement("option");
  option.text = "Lion";
  select.add(option);
}

<select id="select">
    <option class="dis">Cat</b></option>
    <option class="dis">Dog</option>
    <option class="dis">Snake</option>
    <option class="dis">Ostrich</option>
    <option class="dis">Lion</option>
 </select>
 
 <button onclick="add()"> ADD Lion option</button>

score -2 · Answer 3 · answered May 21 '21 at 21:49

This may or may not work on all browsers, but it works on most:

var elements = document.getElementsByClassName("dis");
    doIt(elements, false);

function doIt(elements, status) {
    for (var i = 0; i < elements.length; i++) {
        elements[i].disabled = status;
        elements[i].style.display = status ? null : 'none';
    }
}

 <select>
    <option class="dis">Cat</option>
    <option class="dis">Dog</option>
    <option class="dis">Snake</option>
    <option class="dis">Ostrich</option>
    <option class="dis">Lion</option>
 </select>

How can I hide multiple options from the select tag with javascript and class

3 Answers3