javascript - 根据数据深度切换选择

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 做到这一点？

标签： javascripthtmljquery

Answer 1

您可以为此使用类（甚至HTML data-* Attributes）并在单击父项时提取它们，然后调整它以显示子类别。

例如，当您单击 Vehicles 时，class="Vehicles"它将Vehicles从变量中获取classes。然后你找到所有的类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 optgroup 标签。

顺便说一句，您不能只在单击后保持选择项打开，所以您的切换不会像我认为的那样工作：

使用 Javascript/jQuery 打开选择？

jQuery模拟点击

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