toggle select based on data-depth

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>

on document load all subcategories should be hidden once the user presses on parent category it should toggle related subcategories.
How can I do this using jquery?

$(this).find('[data-depth=1]').toggle(); is toggling all suncategories of all categories — Ramy Safi, Jun 30 '20 at 20:02

ikiK · Answer 1 · 2020-07-01T02:00:29.210

You can use classes (or even HTML data-* Attributes) for this and extract them on click of parent, then condition this to show subcategories.

When you click on Vehicles for example with class="Vehicles" it will get Vehicles from it in variable classes. Then you find all classes with Vehicles-option and do something with it.

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 I have to say this seems like bad design as user must click again to show those subcategory, but that is what you wanted. Maybe rahter implement hover and see how that beehives. And please see HTML optgroup Tag.

BTW, you can not just keep select item open after clicking, so your toggle wont work as I think you want it to work:

Open Select using Javascript/jQuery?

jQuery simulate click

Make html select option drop down menu open by default

toggle select based on data-depth

1 Answers1