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>

隐藏选择标签中的选项

1 个答案: