在选择标签中隐藏选项

Question

我有一个选择标签

<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>

我想用class1隐藏所有选项(一些其他选择触发这个)，如果"选择类别"我想显示所有的选项。隐藏在select中似乎很困难，找不到太多

预期输出:

<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>

Answer 1

你想要得到这样的结果吗?

$("#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>