Hide options in select tag

Question

I have a select tag

<select name="categorySelect" id="categorySelected" onclick="categoryFilter()">
  <option value="Select Category" >Select Category</option>
  <option class = "class1" value="value1">value1</option>
  <option class = "class1" value="value2">value2</option>
  <option class = "class2" value="value1">value2</option>
  <option class = "class3" value="value2">value2</option>
</select>

I want to hide all options with class1 (some other select triggers this) and if "Select Category" option is selected I want to show all options. Hiding in select seems difficult couldn't find much on this

expected output:

<select name="categorySelect" id="categorySelected" onclick="categoryFilter()">
  <option value="Select Category" >Select Category</option>
  <option class = "class1" value="value1">value1</option> --hidden
  <option class = "class1" value="value2">value2</option> --hidden 
  <option class = "class2" value="value1">value2</option>
  <option class = "class3" value="value2">value2</option>
</select>

Welcome to Stack Overflow. We expect that you'll do your research and make an attempt at a solution before you post instead of just posting what it is that you want. We also expect that you'll post your attempt, along with a specific question about what problem you are having. Again, instead of just posting what it is you want to happen. — Scott Marcus, Jan 18 '21 at 00:55
And, we expect that as part of your research, you'll see if [similar questions have already been posted here](https://stackoverflow.com/questions/4398966/how-can-i-hide-select-options-with-javascript-cross-browser). — Scott Marcus, Jan 18 '21 at 00:57
Hello. Unfortunately, your task is not clear. Give more information, please. Really want to help you. — s.kuznetsov, Jan 18 '21 at 01:02
@s.kuznetsov have added expected output for clarity. thanks for reply — Ravi, Jan 18 '21 at 01:07
@ScottMarcus I have already checked all similar questions but none of them have solution i am looking for. — Ravi, Jan 18 '21 at 01:12
Adding the expected output is good, but as I said, we expect that you'll make an attempt at a solution first. And, the link I shared explains very clearly that you can't hide `options`, but it does show a work around. The rest of your requirement is simply writing an `if` statement. — Scott Marcus, Jan 18 '21 at 01:17

score 2 · Accepted Answer · answered Jan 18 '21 at 01:32

You wanted to get such a result?

$("#categorySelected option.class1").hide();

$("#categorySelected").change(function () {
  let index = $(this).prop('selectedIndex');
    if (index == 0) {
      $("#categorySelected option.class1").show();
    } else {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="categorySelect" id="categorySelected">
  <option value="Select Category">Select Category</option>
  <option class = "class1" value="value1">value1</option>
  <option class = "class1" value="value2">value2</option>
  <option class = "class2" value="value1">value2</option>
  <option class = "class3" value="value2">value2</option>
</select>

Hide options in select tag

1 Answers1