Dash联动Dropdown点击清除按钮后子下拉框未重置问题

创建了两个Dash Dropdown组件，下方的city-dropdown是上方area-dropdown的联动下拉框，选择功能运行正常。但点击area-dropdown的清除按钮（X按钮）清空所有选项后，city-dropdown的选中值并未同步重置，仍保留清除前的状态，请问这是为什么？

回调函数 #

@app.callback(
    Output("city-dropdown", "options"),
    Input("area-dropdown", "value"),
)
def update_city_dropdown(areas):
    if areas is None or None in areas or areas == []:
        return []

    _area_codes = area_codes['area'][area_codes['name'].isin(areas)]
    cities = city_codes['name'][city_codes['area'].isin(_area_codes)]
    return [{'label': city, 'value': city} for city in cities]

Dropdown组件定义 #

area_dropdown = dcc.Dropdown(
    options=area_codes['name'],
    placeholder="Select an area",
    multi=True,
    style=DROPDOWN_STYLE,
    id='area-dropdown'
)

city_dropdown = dcc.Dropdown(
    placeholder="Select a city",
    options=[],
    multi=True,
    style=DROPDOWN_STYLE,
    id='city-dropdown'
)

原因 #

当前的回调仅更新了city-dropdown的options属性，没有同步更新它的value属性。当area-dropdown被清空后，city-dropdown的选项被设为空数组，但之前选中的value会被Dash保留下来，因为没有明确的指令去重置它。

解决方案 #

修改回调函数，让它同时输出city-dropdown的options和value，在area-dropdown为空时，将city-dropdown的value也重置为空：

修改后的回调代码：

@app.callback(
    [Output("city-dropdown", "options"),
     Output("city-dropdown", "value")],  # 新增输出value属性
    Input("area-dropdown", "value"),
)
def update_city_dropdown(areas):
    if areas is None or None in areas or areas == []:
        return [], []  # 同时返回空选项和空选中值

    _area_codes = area_codes['area'][area_codes['name'].isin(areas)]
    cities = city_codes['name'][city_codes['area'].isin(_area_codes)]
    city_options = [{'label': city, 'value': city} for city in cities]
    return city_options, []  # 选中值重置为空，也可根据需求调整

这样当area-dropdown被清空时，city-dropdown不仅会清空选项，还会同步清空已选中的值，实现联动重置的效果。

内容的提问来源于stack exchange，提问作者Ben