I am trying to build a dashboard that will having three dropdowns as input, and upon selection of a value in drop-down1, the options in drop-down 2 and dropdown3 would be filtered to show only corresponding options from the data frame.
I don’t know if this has been implemented, I have seen dependent drop-downs where the first drop down determines the options in the second drop-down.
I want a solution where either of the drop-down can update the value of the other and vice-versa. I am looking forward to your help.
From what you are describing, it sounds essentially the same as the chained callback example in Basic Callbacks | Dash for Python Documentation | Plotly, however, you will need to determine which dropdown triggered the callback.
You can do that using dash.callback_context . You will also need to use dash.no_update so that the triggering dropdown options are not updated.
You can learn more about dash.callback_context and dash.no_update in the “advanced callback” chapter in the dash docs.
Your callback could look something like:
@app.callback(
Output('dropdown-1', 'options'),
Output('dropdown-2', 'options'),
Output('dropdown-3', 'options'),
Input('dropdown-1', 'value'),
Input('dropdown-2', 'value'),
Input('dropdown-3', 'value'),
)
def update_dropdown_options(value1, value2, value3):
ctx = dash.callback_context
input_id = ctx.triggered[0]['prop_id'].split('.')[0]
if input_id == 'dropdown-1':
# make new options for dropdown 2 and 3
# don't update options for dropdown-1
return dash.no_update, options2, options3
if input_id == 'dropdown-2':
# make new options for dropdown 1 and 3
return options1, dash.no_update, options3
if input_id == 'dropdown-3':
# make new option for dropdown 1 and 2
return options1, options2, dash.no_update
And if this isn’t what you are trying to do, please make a minimal app including some
sample data to demonstrate what you are trying to achieve.