# Update dcc.Dropdown default values on button click dynamically

**URL:** <https://community.plotly.com/t/update-dcc-dropdown-default-values-on-button-click-dynamically/78747>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [September 23, 2023, 6:20am UTC](https://community.plotly.com/t/update-dcc-dropdown-default-values-on-button-click-dynamically/78747 "2023-09-23T06:20:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![cosco](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@cosco](https://community.plotly.com/u/cosco)\
**Post date:** [September 23, 2023, 6:20am UTC](https://community.plotly.com/t/update-dcc-dropdown-default-values-on-button-click-dynamically/78747/1 "2023-09-23T06:20:07Z")

</div>

Hello, I have a button and a dcc Dropdown. As you can see from my example I want to Update the options in the Dcc.Dropdown dynamically. That works. I would also like to display the newly created options directly in the dropdown, instead of having to insert them by hand. Is there a possibility to achieve this? or any workaround?

```auto
import dash
from dash import Input, Output, State, ClientsideFunction, html, dcc, ctx
from dash.exceptions import PreventUpdate
import json

app = dash.Dash( __name__ )

Button = html.Button('Submit', id='submit', n_clicks=0)

ClickStore = dcc.Store(id="ClickStore", storage_type="session")

Dropdown = dcc.Dropdown(
    options=[],
    multi=True,
    id="dropdown")

app.layout = html.Div([
    ClickStore,
    Button,
    Dropdown
])

#Update Store
@app.callback(Output("ClickStore", "data"),
              Input("submit","n_clicks"),
              State('ClickStore', 'data'),

               prevent_initial_call=True)

def update_Store(nclicks, json_DictStore):
    if nclicks==0:
        raise PreventUpdate

    if nclicks == 1:
        DictStore=[]
        optiondict = {"label": nclicks, "value": nclicks}
        DictStore.append(optiondict)
    if nclicks > 1:
        DictStore = json.loads(json_DictStore)
        optiondict = {"label": nclicks, "value": nclicks}
        DictStore.append(optiondict)
    

    json_DictStore = json.dumps(DictStore)
    return json_DictStore

#Update Dropdown
@app.callback(Output("dropdown", "options"),
              Input("ClickStore","modified_timestamp"),
              State("ClickStore","data"),
               )

def update_Dropdown(ts, json_DictStore):
    if ts is None or json_DictStore is None: 
     raise PreventUpdate

    DictStore = json.loads(json_DictStore)
    return DictStore

if __name__ == ' __main__':
    app.run(host='127.0.0.1', port='3000', debug=True)

```

---

<div class="post-metadata">

**Author:** ![Skiks](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/skiks/32/26561_2.png) [@Skiks](https://community.plotly.com/u/Skiks)\
**Post date:** [September 23, 2023, 12:33pm UTC](https://community.plotly.com/t/update-dcc-dropdown-default-values-on-button-click-dynamically/78747/2 "2023-09-23T12:33:25Z")

</div>

Hi @cosco !

How about that? :

> **Code**
>
> ```python
> from dash import Input, Output, State, html, dcc, callback, Dash
> import json
> 
> app = Dash( __name__ )
> 
> app.layout = html.Div(
> [
> html.Button(id='btn-click', children='Submit'),
> dcc.Dropdown(id="dd-click", multi=True),
> dcc.Store(id="str-click", storage_type="session", data='[]')
> ]
> )
> 
> # Update Store
> @callback(
> Output("str-click", "data"),
> Input("btn-click", "n_clicks"),
> State('str-click', 'data'),
> prevent_initial_call=True
> )
> def update_store(n_clicks, json_store):
> dict_store = json.loads(json_store)
> dict_store.append(f'Label_{n_clicks}')
> return json.dumps(dict_store)
> 
> # Update Dropdown
> @callback(
> Output("dd-click", "options"),
> Input("str-click", "data"),
> )
> def update_dropdown(json_store):
> return json.loads(json_store)
> 
> if __name__ == ' __main__':
> app.run(port=3000, debug=True)
> 
> ```

I refactored a lot to achieve want you requested, but that may be too much, that depends on what you want to do next with that…

Actually we can go further in the refactoring, it’s possible to merge the two callback to update the store and the dropdown at the same time, or even drop the store if you don’t need it elsewhere… 😁

![Animation](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/e/0e6a24f76522c37c614047b080774d30d626a054.gif)

---

<div class="post-metadata">

**Author:** ![cosco](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@cosco](https://community.plotly.com/u/cosco)\
**Post date:** [September 23, 2023, 1:00pm UTC](https://community.plotly.com/t/update-dcc-dropdown-default-values-on-button-click-dynamically/78747/3 "2023-09-23T13:00:16Z")

</div>

Hello Skiks, okay fine I want it to display in the dropdown without inserting it by hand though.

---

<div class="post-metadata">

**Author:** ![Skiks](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/skiks/32/26561_2.png) [@Skiks](https://community.plotly.com/u/Skiks)\
**Post date:** [September 23, 2023, 1:16pm UTC](https://community.plotly.com/t/update-dcc-dropdown-default-values-on-button-click-dynamically/78747/4 "2023-09-23T13:16:13Z")

</div>

You mean you want to have the new options directly selected in the dropdown?  
Like:

> **Code**
>
> ```python
> from dash import Input, Output, State, html, dcc, callback, Dash
> import json
> 
> app = Dash( __name__ )
> 
> app.layout = html.Div(
> [
> html.Button(id='btn-click', children='Submit'),
> dcc.Dropdown(id="dd-click", multi=True),
> dcc.Store(id="str-click", storage_type="session", data='[]')
> ]
> )
> 
> # Update Store
> @callback(
> Output("str-click", "data"),
> Input("btn-click", "n_clicks"),
> State('str-click', 'data'),
> prevent_initial_call=True
> )
> def update_store(n_clicks, json_store):
> list_store = json.loads(json_store)
> list_store.append(f'Label_{n_clicks}')
> return json.dumps(list_store)
> 
> # Update Dropdown
> @callback(
> Output("dd-click", "options"),
> Output("dd-click", "value"),
> Input("str-click", "data"),
> )
> def update_dropdown(json_store):
> list_store = json.loads(json_store)
> return list_store, list_store
> 
> if __name__ == ' __main__':
> app.run(port=3000, debug=True)
> 
> ```

![Animation](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/0/305fa08fdf613478f17f21991bc7b778158016d7.gif)

---

<div class="post-metadata">

**Author:** ![cosco](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@cosco](https://community.plotly.com/u/cosco)\
**Post date:** [September 23, 2023, 1:46pm UTC](https://community.plotly.com/t/update-dcc-dropdown-default-values-on-button-click-dynamically/78747/5 "2023-09-23T13:46:37Z")

</div>

Haha yes Skiks, thank you!