Chained Callback Problem with 2 DropDowns

Dash Python
1

Hello,

I am working on setting up a chained callback with 2 dropdown boxes. The first dropdown selects a state and the second dropdown selects a county. I was able to use the Dash documentation and examples page to get a working callback going. Awesome!

The only thing I want to change is the following: When a state is selected in the 1st drop down, the 2nd drop down is populated correctly. However, I want the first county alphabetically to show up in the 2nd dropdown menu. I thought by adding a value = county[0] argument in the dropdown would take care of it, but it has not.

Here is some example code:

import pandas as pd
import numpy as np
import dash
import os
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output 
from flask import Flask, Response

data = [["Delaware", "Kent County"],
        ["Delaware", "New Castle County"],
        ["Delaware", "Sussex County"],
        ["Rhode Island","Bristol County"],
        ["Rhode Island", "Kent County"],
        ["Rhode Island", "Newport County"],
        ["Rhode Island", "Providence County"],
        ["Rhode Island","Washington"],
        ["District of Columbia","District of Columbia"],
        ["Connecticut","Fairfield County"],
        ["Connecticut","Hartford County"],
        ["Connecticut","Litchfield County"],
        ["Connecticut","Middlesex County"],
        ["Connecticut","New Haven County"],
        ["Connecticut","New London County"],
        ["Connecticut","Tolland County"],
        ["Connecticut","Windham County"]
]

data = pd.DataFrame(
    data,
    columns=[
        "State",
        "County"
    ],
)

state_choices = data['State'].sort_values().unique()
county_choices = data['County'].sort_values().unique()
state_to_county = data.groupby('State')['County'].agg(list).to_dict()

app = dash.Dash(__name__)
server = app.server
app.layout = html.Div(
                children=[
                html.Div([
                    #State Dropdown
                    dcc.Dropdown(
                        id='state_dd',
                        options=[{'label': i, 'value': i} for i in state_choices],
                        value=state_choices[0]
                    )
                ]),
                html.Div([
                    #County Dropdown which is populated from state dropdown
                    dcc.Dropdown(
                        id='county_dd',
                        options=[{'label': i, 'value': i} for i in county_choices],
                        value=county_choices[0]
                    )
                ])
])

@app.callback(
    Output('county_dd', 'options'),
    Input('state_dd', 'value')
)
def set_county_options(selected_state):
    return [{'label': i, 'value': i} for i in state_to_county[selected_state]]

app.run_server(host='0.0.0.0',port='8051')

How should I go about getting that first county to show up in the 2nd drop down? Any help would be appreciated!

2

Hi @plotme1

Try updating the value of the second dropdown in the callback:


@app.callback(
    Output("county_dd", "options"),
    Output("county_dd", "value"),
    Input("state_dd", "value"),
)
def set_county_options(selected_state):
    return (
        [{"label": i, "value": i} for i in state_to_county[selected_state]],
        state_to_county[selected_state][0],
    )
1 Like
3

Thank you so much again @AnnMarieW! Can you explain why the value=county_choices[0] in the second dropdown is ignored?

4

The value defined in the layout is based on the entire dataset and is defined globaly – it does not update with the state.

1 Like
5

Thanks so much! You rock!

1 Like