Python Dash：如何获取动态创建的Dropdown组件输入值？

问题根源 #

1. 错误的取值方式：dcc.Dropdown(id=dropdown_id).value是创建了一个全新的Dropdown实例，并非获取页面上已渲染组件的当前值——Dash的组件状态由框架内部维护，不能通过实例直接访问。
2. 回调触发时机不合理：原回调仅在点击"添加按钮"时触发，无法响应Dropdown值的实时变化。

解决方案：使用模式匹配回调 #

Dash提供了模式匹配回调（Pattern-Matching Callbacks），专门处理动态生成组件的输入/输出绑定。核心思路是给动态组件设置带结构化信息的ID（字典格式），然后通过ALL匹配符捕获所有符合规则的组件状态。

修改后的完整代码 #

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, ALL

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Button("Add Dropdown and Number Field", id="add-button"),
    html.Div(id="input-container", children=[]),
    html.Div(id="output"), 
])

@app.callback(
    Output("input-container", "children"),
    Input("add-button", "n_clicks"),
    State("input-container", "children")
)
def add_input(n_clicks, existing_children):
    if n_clicks is None:
        return existing_children
    
    # 复制现有子组件列表，避免修改原始状态
    updated_children = existing_children.copy()
    
    new_input = dbc.Row([
        dbc.Col(dcc.Dropdown(
            options=[
                {'label': 'Option 1', 'value': 'option-1'},
                {'label': 'Option 2', 'value': 'option-2'},
            ],
            value='option-1',
            # 使用结构化ID，方便模式匹配
            id={'type': 'dropdown', 'index': n_clicks}
        )),
        dbc.Col(dcc.Input(
            type='number',
            value=0,
            id={'type': 'weight', 'index': n_clicks}
        )),
    ])
    
    updated_children.append(new_input)
    return updated_children

@app.callback(
    Output("output", "children"),
    # 匹配所有type为dropdown的组件的value属性
    Input({'type': 'dropdown', 'index': ALL}, 'value'),
)
def process_dropdowns(dropdown_values):
    # dropdown_values是一个列表，按组件创建顺序存储每个Dropdown的当前值
    if not dropdown_values:
        return "暂无选择的下拉框值"
    
    return f"Selected Dropdown Values: {', '.join(dropdown_values)}"

if __name__ == "__main__":
    app.run_server(debug=False)

关键修改说明 #

1. 结构化ID：将动态组件的ID改为字典{'type': 'dropdown', 'index': n_clicks}，其中type用于标识组件类别，index区分不同实例。
2. 模式匹配Input：回调使用Input({'type': 'dropdown', 'index': ALL}, 'value')，ALL表示匹配所有符合该结构ID的组件，回调参数dropdown_values会接收所有Dropdown值组成的列表。
3. 实时响应：现在只要任何一个Dropdown的值发生变化，回调就会自动触发，实时更新输出内容。
4. 避免状态污染：复制现有子组件列表再添加新元素，避免直接修改State传递的原始列表导致的意外问题。

扩展：同时获取数字输入框的值 #

如果需要同时获取对应的数字输入框的值，只需在回调中添加对应的模式匹配Input：

@app.callback(
    Output("output", "children"),
    Input({'type': 'dropdown', 'index': ALL}, 'value'),
    Input({'type': 'weight', 'index': ALL}, 'value'),
)
def process_dropdowns(dropdown_values, weight_values):
    # 两个列表长度一致，按索引对应
    combined = [f"选项: {d}, 权重: {w}" for d, w in zip(dropdown_values, weight_values)]
    return "所有选择:\n" + "<br>".join(combined)

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