# Dropdown updating dropdown?

**URL:** <https://community.plotly.com/t/dropdown-updating-dropdown/5831>\
**Category:** Dash Python\
**Created:** [September 18, 2017, 11:03pm UTC](https://community.plotly.com/t/dropdown-updating-dropdown/5831 "2017-09-18T23:03:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mikej](https://avatars.discourse-cdn.com/v4/letter/m/a9a28c/32.png) [@mikej](https://community.plotly.com/u/mikej)\
**Post date:** [September 18, 2017, 11:03pm UTC](https://community.plotly.com/t/dropdown-updating-dropdown/5831/1 "2017-09-18T23:03:56Z")

</div>

New to interface development in general and was wondering if it’s possible to update a dropdown with another dropdown? I searched around and found the example updating the city list in [Basic Callbacks | Dash for Python Documentation | Plotly](https://plot.ly/dash/getting-started-part-2) but it’s using dcc.RadioItems instead of dcc.Dropdown.

```
app.layout = html.Div([
  dcc.Dropdown(id='ptb-bq-project', options=[{'label':'project1','value':'project1'}, {'label':'project2':'value':'project2'}])
  dcc.Dropdown(id='ptb-bq-dataset')
])

@app.callback(dash.dependencies.Output('ptb-bq-dataset', 'options'),
                         [dash.dependencies.Input('ptb-bq-project', 'value')])
def retrieve_project_datasets(project_id):
  if project_id:
    options_list = []
    datasets = CALL GOOGLE API TO GET PROJECT DATASETS
    for dataset in datasets:
      options_list.append({'label': dataset, 'value': dataset})
    return options_list

```

When I select a project the function is invoked and successfully retrieves the datasets but the option list of the dataset dropdown never gets updated to reflect it. Not sure if I’m doing something wrong or if this isn’t a valid design approach. Any pointers much appreciated!

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [September 19, 2017, 1:46am UTC](https://community.plotly.com/t/dropdown-updating-dropdown/5831/2 "2017-09-19T01:46:22Z")

</div>

Welcome @mikej! The example that you found in the user guide is the right example to be looking at. In fact, you should be able to just change that example from `dcc.RadioItems` to `dcc.Dropdown` and it should work:

 ![multiple-city-chained-dropdown](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/9811812660770911ce93d27a89d8d365a3429958.gif)

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

app = dash.Dash( __name__ )

all_options = {
    'America': ['New York City', 'San Francisco', 'Cincinnati'],
    'Canada': [u'Montréal', 'Toronto', 'Ottawa']
}
app.layout = html.Div([
    dcc.Dropdown(
        id='countries-dropdown',
        options=[{'label': k, 'value': k} for k in all_options.keys()],
        value='America'
    ),

    html.Hr(),

    dcc.Dropdown(id='cities-dropdown'),

    html.Hr(),

    html.Div(id='display-selected-values')
])

@app.callback(
    dash.dependencies.Output('cities-dropdown', 'options'),
    [dash.dependencies.Input('countries-dropdown', 'value')])
def set_cities_options(selected_country):
    return [{'label': i, 'value': i} for i in all_options[selected_country]]

@app.callback(
    dash.dependencies.Output('cities-dropdown', 'value'),
    [dash.dependencies.Input('cities-dropdown', 'options')])
def set_cities_value(available_options):
    return available_options[0]['value']

@app.callback(
    dash.dependencies.Output('display-selected-values', 'children'),
    [dash.dependencies.Input('countries-dropdown', 'value'),
     dash.dependencies.Input('cities-dropdown', 'value')])
def set_display_children(selected_country, selected_city):
    return u'{} is a city in {}'.format(
        selected_city, selected_country,
    )

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

```

---

<div class="post-metadata">

**Author:** ![mikej](https://avatars.discourse-cdn.com/v4/letter/m/a9a28c/32.png) [@mikej](https://community.plotly.com/u/mikej)\
**Post date:** [September 19, 2017, 4:44pm UTC](https://community.plotly.com/t/dropdown-updating-dropdown/5831/3 "2017-09-19T16:44:36Z")

</div>

Thanks Chris. I got it to work after restarting from the example. Really appreciate what you’ve created here. It lowers the skills bar for people to create powerful solutions.

---

<div class="post-metadata">

**Author:** ![cecilia](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/cecilia/32/7075_2.png) [@cecilia](https://community.plotly.com/u/cecilia)\
**Post date:** [August 1, 2019, 8:49am UTC](https://community.plotly.com/t/dropdown-updating-dropdown/5831/4 "2019-08-01T08:49:21Z")

</div>

Great Example!! 🙂 It helps a great deal…

---

<div class="post-metadata">

**Author:** ![nkx](https://avatars.discourse-cdn.com/v4/letter/n/c67d28/32.png) [@nkx](https://community.plotly.com/u/nkx)\
**Post date:** [July 3, 2020, 7:30am UTC](https://community.plotly.com/t/dropdown-updating-dropdown/5831/5 "2020-07-03T07:30:36Z")

</div>

What if there are multiple dropdown (no. are not fixed) And choosing one value on the dropdown should not be in all the other dropdown.? Similar to this question: [https://stackoverflow.com/questions/60377790/remove-option-from-all-other-dropdowns-in-dash](https://stackoverflow.com/questions/60377790/remove-option-from-all-other-dropdowns-in-dash).

I ain’t able to find something similar like this which is dynamic in nature.

---

<div class="post-metadata">

**Author:** ![PBK](https://avatars.discourse-cdn.com/v4/letter/p/b9e5f3/32.png) [@PBK](https://community.plotly.com/u/PBK)\
**Post date:** [September 1, 2020, 4:33pm UTC](https://community.plotly.com/t/dropdown-updating-dropdown/5831/6 "2020-09-01T16:33:03Z")

</div>

@chriddyp - thanks for the example. I’m building a screen that has a drop down whose values are dependent on another drop down. The issue that I have is that the screen has 8 input items. The first item is a date, the second is the first drop down and the third is the second drop down. The fourth through eighth items are generic and I need them to appear on the screen when the date and the two drop downs appear. As an example the first drop down is the customers name and the second drop down would be a list of the accounts that the customer has. How can I show all eight input items on my screen before the drop down values are chosen? In your example I need to have a callback set up so that the set of values for the second drop down are can bet determined.

Thanks for all of the great work. Dash is incredible.

---

<div class="post-metadata">

**Author:** ![nmbogdan](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nmbogdan/32/14850_2.png) [@nmbogdan](https://community.plotly.com/u/nmbogdan)\
**Post date:** [April 25, 2021, 2:14am UTC](https://community.plotly.com/t/dropdown-updating-dropdown/5831/7 "2021-04-25T02:14:51Z")

</div>

@chriddyp Is this behavior available in Plotly for Python—or is it limited to Dash users?

I have two dropdowns, one with schools the other with an admissions status (accept, reject, waitlist), and am hoping to select a school and then to select which admissions category _for that school_ to display. The dropdown text won’t change but the source it pulls from will. Is there any way to get the value of a dropdown?

Thanks!