Button to clear dropdonws

Dash Python
1

I have many dropdowns in my application and it would be nice to have a button that clears them all at once. Has anyone tried something like this?

2

Is this what you are trying to do? You will need to create a separate callback for each dropdown you want cleared.

# -*- coding: utf-8 -*-
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import flask
import os

app = dash.Dash()
app.layout = html.Div([

                #Button to clear dropdown options
                html.Button(id='clearButton', n_clicks=0, children='Clear'),

                #First dropdown box
                dcc.Dropdown(id='dropDown1',
                        options=[
                                {'label': 'One', 'value': 1},
                                {'label': 'Two', 'value': 2},
                                {'label': 'Three', 'value': 3}
                                ],
                        value=1
                )channel 3: open failed: connect failed: Connection refused

                #Second dropdown box
                dcc.Dropdown(id='dropDown2',
                        options=[
                                {'label': 'Four', 'value': 4},
                                {'label': 'Five', 'value': 5},
                                {'label': 'Seven', 'value': 7}
                                ],
                        value=4
                )
])

#Update dropDown1 options
@app.callback(Output('dropDown1', 'options'),
             [Input('clearButton', 'n_clicks')])
def clearDropDown1(n_clicks):

        if n_clicks != 0: #Don't clear options when loading page for the first time
                return [] #Return an empty list of options

#Update dropDown2 options
@app.callback(Output('dropDown2', 'options'),
             [Input('clearButton', 'n_clicks')])
def clearDropDown2(n_clicks):

        if n_clicks != 0: #Don't clear options when loading page for the first time
                return [] #Return an empty list of options

if __name__ == '__main__':
app.run_server(debug=True)
3

The constraint you have to work with here is that callbacks can only target a single (element, property) pair. If all your dropdowns can be located within the one element that does not include any other dynamic content, you can use a single callback that regenerates cleaned dropdowns (so then this is just how the dropdowns are created initially). If they need to be dispersed throughout your app, then @kevinmcl is right, you’ll have to have a separate callback targeting each one. @kevinmcl’s example clears the options, whereas the other possibility is that you meant to clear the value. In either case, you still need multiple callbacks.

4

One neat trick is to don’t use app.callback as a wrapper but a function call. That way it is easy to make multiple outputs for one callback in a for loop and lamba (or you can provide a function as an argument):

for index in range(10):
    try:
        app.callback(Output('{}-dropdown'.format(index), 'value'),
                     [Input('reset-button', 'n_clicks')], 
                     state=[State('{}-dropdown'.format(index), 'value')])(lambda clicks, value: return [] if clicks != 0 else value)
    except CantHaveMultipleOutputs:
        continue

which will create callback with the same trigger for 10 dropdowns.