Chained Callback Problem with 2 DropDowns


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(

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(
                    #State Dropdown
                        options=[{'label': i, 'value': i} for i in state_choices],
                    #County Dropdown which is populated from state dropdown
                        options=[{'label': i, 'value': i} for i in county_choices],

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


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

Hi @plotme1

Try updating the value of the second dropdown in the 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]],

1 Like

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

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

Thanks so much! You rock!

1 Like