Synchronise and dynamically changing dropdowns

[josh270297]

I currently have a Dash app with multiple tabs containing dropdowns that are synchronized and hence always contain the same value. I have used the following method to synchronise the dropdowns:

Is there a way to synchronize dropdowns across tabs

I figured out how to synchronize dropdowns while still allowing for all tabs to be rendered at startup! This is a great benefit since it makes tab transitions much smoother, at the cost of a slightly longer initial load. The problem esentially came down to needing to know when a tab was changed. This all changed once I figured out that you can still control the value of tabs regardless of the tabs method you use. Here is my generalized recipe for those who would like to implement this as well: …

I also have updated the options of another dropdown depending on the selection made within the first dropdown. This is documented in part3 of the tutorial under “Chained Callbacks”:

Part 2. Basic Callbacks | Dash for Python Documentation | Plotly

As an example I have created a demo app that essentially has a country and city dropdown on the first tab, and exactly the same on the second tab. This is just like the tutorial above but with both dropdowns being synchronised across the tabs. I have no problem synchronizing the dropdowns, but where I am struggling is selecting the value of the city dropdown when a country is selected. I.e. when ‘America’ is selected in the country dropdown, ‘New York’ should automatically be selected in the city dropdown. Essentially I need to combine the following callbacks into one:

@app.callback(
              Output('cities-dropdown', 'value'),
              [Input('tabs', 'value')],
              [State('dropdown-cache', 'data')])
def synchronize_dropdowns(_, cache):
    return cache


@app.callback(
    Output('cities-dropdown', 'value'),
    [Input('cities-dropdown', 'options')])
def set_cities_value(available_options):
    return available_options[0]['value']

I would also have the same callback for the city dropdown on the second tab.