Update one list from another

Question

I have two multi-select lists in HTML - one of categories, and another of items. What I want is that, when an item selected in the "category" list, everything in the "items" list from that category is also selected.

For example, if "Categories" contains "Animal", "Mineral", and "Vegetable", and "Items" contains "Dog", "Cat", "Monkey", "Diamond", "Granite", "Carrot", "Tomato":

If "Animal" is selected in one list, "Dog", "Cat", and "Monkey" should be selected; any other selections should remain as they are.

I'm using a Symfony PHP backend on the server, if that makes any difference

Answer 1

Could use the class attribute and define the categories for items in this field.

<ul id="items">
 <li class="animal">Dog</li>
 <li class="animal">Cat</li>
</ul>

Using Javascript you define a onclick function that goes through your #items and finds all list items with the IndexOf('category')

Let me know if you need a more detailed example.