# Button to clear dropdonws

**URL:** <https://community.plotly.com/t/button-to-clear-dropdonws/7664>\
**Category:** Dash Python\
**Created:** [January 10, 2018, 6:31pm UTC](https://community.plotly.com/t/button-to-clear-dropdonws/7664 "2018-01-10T18:31:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![abcorep](https://avatars.discourse-cdn.com/v4/letter/a/b487fb/32.png) [@abcorep](https://community.plotly.com/u/abcorep)\
**Post date:** [January 10, 2018, 6:31pm UTC](https://community.plotly.com/t/button-to-clear-dropdonws/7664/1 "2018-01-10T18:31:14Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kevinmcl](https://avatars.discourse-cdn.com/v4/letter/k/8dc957/32.png) [@kevinmcl](https://community.plotly.com/u/kevinmcl)\
**Post date:** [January 14, 2018, 11:48pm UTC](https://community.plotly.com/t/button-to-clear-dropdonws/7664/2 "2018-01-14T23:48:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [January 15, 2018, 2:14am UTC](https://community.plotly.com/t/button-to-clear-dropdonws/7664/3 "2018-01-15T02:14:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![radekwlsk](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/radekwlsk/32/1385_2.png) [@radekwlsk](https://community.plotly.com/u/radekwlsk)\
**Post date:** [January 16, 2018, 1:43pm UTC](https://community.plotly.com/t/button-to-clear-dropdonws/7664/4 "2018-01-16T13:43:45Z")

</div>

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.