jQuery隐藏选项元素

Question

HTML：

<option data-task-hours="100" value="1"> - Parent Task</option>
<option data-task-hours="50" value="2"> -  - Child task 1 </option>
<option data-task-hours="25" value="3" class="third-level-child"> -  -  - Sub Child task 1.1</option>
<option data-task-hours="50" value="5"> -  - Child task 2</option>

要隐藏具有值的选项，我可以使用

$("#selectlistID option[value='3']").hide();

如何使用子类隐藏所有选项元素？

Answer 1

您可以使用包含选择器：

$("#selectlistID option:contains('-  -  -')").hide();

更新：使用类选择器 -

$('option.third-level-child').hide();

Answer 2

您必须按类选择选项，如下所示

＆＃13;

＆＃13;

$("#selectlistID option[class='third-level-child']").hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="selectlistID">
<option data-task-hours="100" value="1"> - Parent Task</option>
<option data-task-hours="50" value="2"> -  - Child task 1 </option>
<option data-task-hours="25" value="3" class="third-level-child"> -  -  - Sub Child task 1.1</option>
<option data-task-hours="50" value="5"> -  - Child task 2</option>
  </select>

＆＃13;

＆＃13;

＆＃13;