Update one list from another

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开发者_如何学JAVA a Symfony PHP backend on the server, if that makes any difference

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.