✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Button to clear dropdonws

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?

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
                                {'label': 'One', 'value': 1},
                                {'label': 'Two', 'value': 2},
                                {'label': 'Three', 'value': 3}
                )channel 3: open failed: connect failed: Connection refused

                #Second dropdown box
                                {'label': 'Four', 'value': 4},
                                {'label': 'Five', 'value': 5},
                                {'label': 'Seven', 'value': 7}

#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__':

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.

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):
        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:

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