Dropdown updating dropdown?

Dash Python
1

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 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!

2

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
multiple-city-chained-dropdown.gif837×649 140 KB 

# -*- 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)
4 Likes
3

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.

2 Likes
4

Great Example!! :slight_smile: It helps a great deal…

5

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.

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

6

@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.

7

@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!