ChoiceFilter

ChoiceFilter is a pure Vanilla JavaScript library which creates chained dependency among select dropdown lists, checkboxes and radio buttons in a simple and an easy way. A common use case is if you select a continent from a dropdown then countries in another dropdown which relies on continents should be filtered based on the selected item, similarly countries dropdown may filter a group of checkboxes for instance a group of cities. In this case of ChoiceFilter, continents filter countries and countries filter cities, if continents dropdown is changed based on its new value the domino effect may occur and the whole chain gets affected.

Main Features
Supports following relationships:
You can build dependency (relationships) like:

Setup and more here.


A Combined Example

A combined example where different element types filter each other. In this case is presented a relationship between: Selects, Checkboxes and Radio Buttons.


Example 1

Info: In this example Countries depend on Continents, and Cities depend to Countries dropdown, so there is a chain. If Country changes then only Cities will be filtered but if Continent changes all chain will be affected.



Which cities you visited:

Hamburg
Berlin
Prishtina
Prizren
Tokyo
Nagasaki
Istanbul
Ankara

In which squares did you go:

Hamburg Square 1
Hamburg Square 2
Berlin Square 1
Berlin Square 2
Prishtina Square 1
Prishtina Square 2
Prizren Square 1
Prizren Square 2
Tokyo Square 1
Tokyo Square 2
Nagasaki Square 1
Nagasaki Square 2
Istanbul Square 1
Istanbul Square 2
Ankara Square 1
Ankara Square 2

Favourite square?

Hamburg Square 1
Hamburg Square 2
Berlin Square 1
Berlin Square 2
Prishtina Square 1
Prishtina Square 2
Prizren Square 1
Prizren Square 2
Tokyo Square 1
Tokyo Square 2
Nagasaki Square 1
Nagasaki Square 2
Istanbul Square 1
Istanbul Square 2
Ankara Square 1
Ankara Square 2