Conditional Dropdown Boxes

Learn how to conditionally filter a lower level dropdown box such as position or city, by a higher level category such as department or region, using Corvid (a.k.a. Wix Code). This is useful for breaking down lower level dropdown boxes with many options into fewer options while maintaining granularity.

This example uses department and position (i.e. jobs or roles) data from the #Employee collection to create the options in each downdown. For more information on how to filter a repeater using dropdown boxes in general, please refer to this page. The position dropdown box (#iptConditional) is conditionally filtered on the selection from the department dropdown box (#iptRegular) since there are many positions within each department. All positions are available for selection when no department is selected. Try the example below.

Try it!
#iptRegular
arrow&v
arrow&v
#iptConditional

The uniqueDepartment function finds a distinct list of departments from the #Employees collection and sets them as the options for the #iptRegular dropdown box. The uniqueDepartment function is executed onReady to populate the dropdown as soon as the page loads. 

Similarly, the uniquePosition function finds a distinct list of positions from the #Employees collection and sets them as options for the #iptConditional dropdown box with one difference: it first checks if there is a selection made in the #iptRegular dropdown box and filters the positions by the selected department. If no selection has been made in #iptRegular, it brings back a distinct list of all positions. The uniquePosition function is executed onReady to populate the dropdown as soon as the page loads, and everytime the user makes a selection in #iptRegular.

An onChange event listener is added to #iptRegular to trigger a refiltering of the #iptConditional dropdown box upon each department selection. It also resets the #iptConditional selection to null when a department choice has been selected.

Page Code

Please wait ...
Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! All our code snippets come with full support to help you implement them on your own website - simply contact us for help.