如何实现Dash中基于首个下拉框选项的联动二级下拉框

要实现两个下拉框的联动，核心是利用Dash的回调函数监听第一个下拉框的选择，动态更新第二个下拉框的选项。以下是完整实现代码：

from dash import Dash, html, dcc, Input, Output

# 定义选项字典（注意不要用内置名称dict作为变量名）
option_dict = {'a': ['a1', 'a2', 'a3'],
               'b': ['b1', 'b2', 'b3'],
               'c': ['c1', 'c2', 'c3']}

# 补充原代码中用到的侧边栏样式
SIDEBAR_STYLE = {
    'width': '25%',
    'padding': '20px',
    'backgroundColor': '#f8f9fa'
}

app = Dash(__name__)
sidebar = html.Div(
    [
        html.H2("xyz note"),
        html.P("Select a, b or c"),
        # 第一个下拉框：设置唯一ID，选项为字典的键
        dcc.Dropdown(
            id='key-dropdown',
            options=[{'label': k, 'value': k} for k in option_dict.keys()],
            value='a'  # 设置默认选中项，确保页面加载时第二个下拉框有内容
        ),
        html.P("Select the values"),
        # 第二个下拉框：设置唯一ID，初始选项为空
        dcc.Dropdown(id='value-dropdown')
    ],
    style=SIDEBAR_STYLE
)

app.layout = html.Div([sidebar])

# 回调函数：实现下拉框联动逻辑
@app.callback(
    Output('value-dropdown', 'options'),
    Input('key-dropdown', 'value')
)
def update_value_options(selected_key):
    # 根据选中的键，返回对应的选项列表（转成Dash要求的格式）
    return [{'label': v, 'value': v} for v in option_dict[selected_key]]

if __name__ == '__main__':
    app.run_server(debug=True)

关键细节说明 #

• 组件ID：必须给两个下拉框设置唯一id，这是回调函数定位组件的核心标识
• 回调逻辑：
  • Input监听第一个下拉框的value变化
  • Output负责更新第二个下拉框的options参数
  • 函数内部根据选中的键，从字典中取出对应值，转换成Dash下拉框需要的{'label': 显示文本, 'value': 实际值}格式
• 初始状态：给第一个下拉框设置value属性，避免页面加载时第二个下拉框为空

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