Hide options in select tag

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>  

https://stackoverflow.com/questions/65767544/hide-options-in-select-tag January 18, 2021 at 08:50AM