DASH chained callback (update checklist based on user input)

I have 2 checklists, country and district. I want the district checklist to update based on the user’s input in country (e.g. if the user selects United Kingdom, I want the district checklist to only display the districts in the United Kingdom).

I tried using the plotly documentation (section " Dash App With Chained Callbacks") but I am getting an error at the end. I get a TypeError that lists are unhashable. Can someone help me with that please?

all_options = {
    'United Kingdom': ['East', 'London', 'South-East', 'South-West', 'North-East', 'North-West', 'Midlands', 'Yorkshire', 'Scotland'],
    'Netherlands': ['Amsterdam']
}

dcc.Checklist(id='country_checklist',
                                  options=[{'label': k, 'value': k} for k in all_options.keys()],
                                  value=[],
                                  labelStyle={'display': 'block'},
                                  inputStyle={"margin-right": "5px"}
                                  ),

dcc.Checklist(className='checkbox',
                                  id='district_checklist',
                                  value=[],
                                  labelStyle={'display': 'block'},
                                  inputStyle={"margin-right": "5px"}
                                  )

@app.callback(
    Output('district_checklist', 'options'),
    Input('country_checklist', 'value'))

def set_district_options(selected_country):
    return [{'label': i, 'value': i} for i in all_options[selected_country]]

3 posts - 2 participants

Read full topic