根据数据深度切换选择

Question

<select id="advert_category" name="advert_category">
<option value="">All Items</option>
<option value="512">All Test 2</option>
<option value="52">Vehicles</option>
<option value="64" data-depth="1">&nbsp;&nbsp;Cars For Sale</option>
<option value="65" data-depth="1">&nbsp;&nbsp;Cars For Rent</option>
<option value="66" data-depth="1">&nbsp;&nbsp;All Vehicle Spare Parts</option>
<option value="67" data-depth="1">&nbsp;&nbsp;Number</option>
</select>

在文档加载时，一旦用户按下父类别，所有子类别都应隐藏，它应该切换相关的子类别.
如何使用jquery执行此操作？

Answer 1

您可以为此使用类(甚至 HTML data-* 属性(并在单击父级时提取它们，然后对其进行条件以显示子类别。

例如，当您单击带有class="Vehicles"的车辆时，它将在可变classes中获取Vehicles。 然后，您可以找到所有带有Vehicles-option的类并对其进行操作。

find("."+classes+"-option")

$( "#advert_category > option" ).click(function() {
var classes=$(this).attr("class");
console.log(classes);
$("#advert_category").find("."+classes+"-option").toggle();
});

.Vehicles-option, .colors-option {
display: none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="advert_category" name="advert_category">
<option value="">All Items</option>
<option value="512">All Test 2</option>
<option value="52" class="Vehicles">Vehicles</option>
<option value="64" data-depth="1" class="Vehicles-option" hidden>&nbsp;&nbsp;Cars For Sale</option>
<option value="65" data-depth="1" class="Vehicles-option"  >&nbsp;&nbsp;Cars For Rent</option>
<option value="66" data-depth="1" class="Vehicles-option" hidden>&nbsp;&nbsp;All Vehicle Spare Parts</option>
<option value="67" data-depth="1" class="Vehicles-option"  >&nbsp;&nbsp;Number</option>
<option value="52" class="colors">Colors</option>
<option value="64" data-depth="1" class="colors-option"  >&nbsp;&nbsp;Red</option>
<option value="65" data-depth="1" class="colors-option" >&nbsp;&nbsp;Blue</option>
</select>

Aldo 我不得不说这似乎是糟糕的设计，因为用户必须再次单击才能显示这些子类别，但这就是您想要的。也许拉赫特实施悬停，看看蜂箱是如何形成的。请参阅HTML选择组标签。

顺便说一句，您不能在单击后保持选择项目处于打开状态，因此您的切换将无法正常工作，因为我认为您希望它起作用：

Open Select using Javascript/jQuery？

j查询模拟点击

默认情况下打开 html 选择选项下拉菜单