Interconnected Filters


I am trying to create interlinked dynamically updated filters/dropdowns. I have seen an example of dynamically updating options of a filter based on the previous filter option, but in my scenario I am attempting to update either of the filters depending on the other. As an example,

Filter 1: options - New York, Montreal, San Francisco
Filter 2: options - New York: [Harlem,Chinatown,Flushing], Montreal:[Old Montreal, Downtown Montreal, Mile End], San Francisco:[Financial District, Mission District, Japan Town]

If I select a value on Filter 1 corresponding options are updated in Filter 2 using Callback, but I would like to show all options in Filter 2 in the beginning and if a user selects an option on Filter 2 instead, Filter 1 should also be accordingly updated. i.e. Say someone selects Mission District in Filter 2, Filter 1 should automatically update to San Francisco.

How can I do this in Dash?

You could use chained callback to make it. You can check example here: Dash

1 Like

Thank you @hoatran. That worked!