Save selected value of dropdown and assign it by default in another dropdown / Duplicate dropdown

Dash Python
1

I was wondering if it is possible to save the selected value of a dropdown and put it by default in a dropdown that has the same values but it is in another tab:

uriCounts tab

 dcc.Tab(label='uriCounts', value = 'es_uricounts', children = [
    html.Div([
    html.Br(),
    html.H3("Choose uriCounts file version: "),
    dcc.Dropdown(id='uriCounts_dropdown',options=[
        {'label': 'Oct 1st 2016', 'value': 'Oct 1st 2016'},
        {'label': 'Oct 1st 2020', 'value': 'Oct 1st 2020'},
        {'label': 'May 25th 2021', 'value': 'May 25th 2021'},
        {'label': 'Jun 25th 2021', 'value': 'Jun 25th 2021'}], 
        placeholder="Version"),
     html.Br(),
    html.Div(id='uriCounts_container')
    ],style = {'margin-left': '3.2552083333333335vw', 'margin-right': '3.2552083333333335vw'})
     ], style = tab_style, selected_style = tab_selected_style)

pairCounts tab

dcc.Tab(label='pairCounts', children = [
         html.Div([
            html.Br(),
    html.H3("Choose pairCounts file version: "),
    dcc.Dropdown(id='pairCounts_dropdown',options=[
         {'label': 'Oct 1st 2016', 'value': 'Oct 1st 2016'},
        {'label': 'Oct 1st 2020', 'value': 'Oct 1st 2020'},
        {'label': 'May 25th 2021', 'value': 'May 25th 2021'},
        {'label': 'Jun 25th 2021', 'value': 'Jun 25th 2021'}], 
        value=**uriCounts_value**),
     html.Br(),
    html.Div(id='pairCounts_container')
    ], style = {'margin-left': '3.2552083333333335vw', 'margin-right': '3.2552083333333335vw'})
      ], style = tab_style, selected_style = tab_selected_style)

When you select a value in the dropdown of uriCounts tab, I want the dropdown of pairCounts tab to have that value assigned.

Also it would be nice if it could be done in reverse order: first select a value in the dropdown of pairCounts tab and then have that value selected in the dropdown of uriCounts tab

Hope you can help me with this. Thanks in advance.

2

Hi @krakken and welcome to the Dash forum :slightly_smiling_face:

Maybe try syncing the dropdowns in a callback?


@app.callback(
    Output('dropdown1', 'value'),
    Output('dropdown2', 'value'),
    Input('dropdown1', 'value'),
    Input('dropdown2', 'value'),
)
def sync_dropdowns(val1, val2):
    ctx = dash.callback_context
    input_id = ctx.triggered[0]['prop_id'].split('.')[0]
    if input_id == 'dropdown1':
        return dash.no_update, val1
    else:
        return val2, dash.no_update
1 Like
3

Hi @AnnMarieW

Thank you for your answer. That looks good.

I will test it and tell you later

1 Like
4

It works awesome @AnnMarieW

Thank you!

1 Like