A simple jQuery options-list filter

June 10, 2017

There is a lot you can do with the jQuery $(selector).each() function which allows us to Iterate over an object, executing a function for each matched element. In this example we have a list of options and a list of items. We want to use the values that are assigned to the options, which match the classes of the list items, to show and hide in an element.

First, let’s create our element structure using select options and unordered list items.

Using one of the 5 most popular jQuery .each() functions we can loop through each element of the target jQuery object.

The result is a simple selector to filter that will display information related to that selection.