For every time you click a button you add the dropdown menu selection into display dash plotly

Dash Python
1

I want the user to be able to select one option from the 3 dropdown menues, and this selection to be displayed after the button “Add” is being clicked.
Moreover, I want to user to be able to make multiple selection of the dropdown items and have all the choices displayed below if the button "Add " is clicked.

If the user does not like a selected statistics, he can delete it by clicking in the delete button.
Screenshot 2022-03-31 141307

        dbc.Row(
            [
                dbc.Label('Select statistics:', className="my-label"),

                dbc.Col(
                    dcc.Dropdown(
                        id='statistics-specify',
                        className='dash-bootstrap',
                        options=[{'label': 'min', 'value': 'min'},
                                 {'label': 'max', 'value': 'max'},
                                 {'label': 'mean', 'value': 'mean'},
                                 {'label': 'standard deviation', 'value': 'std'},
                                 ],
                        value="",
                        #multi=True,
                        clearable=False,style={'float': 'right',"width":"200px"}
                    ),
                ),
            ], className="mt-2",
        ),
        dbc.Row(
            [
                dbc.Label('Specify daily lags:', className="my-label"),

                dbc.Col(
                    dcc.Dropdown(
                        id='lags-specify',
                        className='dash-bootstrap',
                        options=[{'label': f'lag_{i}', 'value': f'lag_{i}'} for i in range(11)],
                        value="",
                        #multi=True,
                        clearable=False,style={'float': 'right',"width":"200px"}
                    ),
                ),
            ], className="mt-2",
        ),
dbc.Row(
            [
                dbc.Label('Specify sliding window:', className="my-label"),

                dbc.Col(
                    dcc.Dropdown(
                        id='window-specify',
                        className='dash-bootstrap',
                        options=[{'label': f'window_{i}', 'value': f'window_{i}'} for i in range(21)],
                        value="",
                        #multi=True,
                        clearable=False,style={'float': 'right',"width":"200px"}
                    ),
                ),

            ], className="mt-2",
        ),
        dbc.Button(id='add-selection', className='btn btn-primary update-my-graph mt-2', children=[
            html.Span([html.I(className='fa fa-solid fa-check'), " Add", ]),
        ], style={'float': 'right', 'margin': 'auto'}),
        html.Br(),
        html.Br(),
        html.Br(),

        html.Hr(),
        dbc.Row(
            [
                dbc.Label(id="selected_features_set", className="my-text"),
                dbc.Button(id='erase_button-select-1', className='btn btn-primary erase-button-1', children=[
                    html.Span([html.I(className='fa fa-solid fa-eraser')]), ], ),
             ],
                className="mt-2", ),


@app.callback(
    Output('selected_features_set', 'children'),
    [Input('add-selection', 'n_clicks'), Input('statistics-specify', 'value'),Input('lags-specify', 'value'), Input('window-specify', 'value')])
def update_div(n_clicks, input_value_1, input_value_2, input_value_3):
    '''
    Display the selected statistics for the graph
    '''
    if n_clicks is not None:
        return f'Selected statistics: {input_value_1}_{input_value_2}_{input_value_3}'

Thanks for the help!

2

hi @starry ,
That a good question. Thank you for posting it. I removed the community-components tag and the show-and-tell and the tips-and-tricks tag, because this is not relevant to those tags. This is merely a question.

I think you would benefit from using pattern matching callback. Here’s sample code of an add/delete button. I recommend reading over it until you fell comfortable with the code, then try to change the checkboxes into dropdowns.

3

Hello @adamschroeder ,

thank you for your reply. It looks like it will solve my problem. I think I need to substitute the input box with my dropdown lists, and keep the checkboxes.

It worked perfectly!!! thank you!!

1 Like