调用回调函数的动态下拉选项答案

【问题标题】：Dynamic dropdown options calling callback function调用回调函数的动态下拉选项
【发布时间】：2022-02-04 13:02:10
【问题描述】：

我正在尝试在 python 中创建一个带有破折号核心组件的下拉菜单。下拉菜单应该有动态选项，下拉菜单的选择会影响其他回调函数。

我的代码的问题不在于函数中的逻辑。在下拉菜单中生成选项的函数会返回正确的内容。

我查看了other answers on other sites，它说要使用这样的动态选项定义下拉菜单

dcc.Dropdown( id="dropdown_id",multi=True,placeholder="选择一个选项", ),

虽然official plotly site 说在下拉菜单定义中包含一个 id，以便在每次更改时调用回调函数

您现在可能会看到我的问题。由于下拉菜单定义中有 2 个id 字段（一个用于生成选项，另一个用于调用函数）它给了我一个keyword argument repeated 错误。

想知道是否有人可以帮助我。

参考代码：

@app.callback(
[Input('my-date-picker-single', 'date'),],
[Output('industry_groups', 'data')])
def get_industry_grps(date):
    ...some operations...
    return out = [
                  {'label': 'abc', 'value': 'abc'},
                  {'label': 'def', 'value': 'def'},
                  {'label': "ghi", 'value': "ghi"},
                  {'label': 'jkl', 'value': 'jkl'}]



html.Div([
          dbc.FormGroup(
                       [
                       dbc.Label("Industry Filter:", width=2, align='center',),
                       dbc.Col(
                       dcc.Dropdown( id='industry_groups', #(output of the callback function above)
                                     value=['abc', 'def', "ghi", 'jkl'],
                                     id="portfolio_views_exposure_industry_dropdown", #(function to be called after selections within dropdown menu)
                                            multi=True
                                            ), ...........style stuff #(deleted to save space)


@app.callback(
    [Output(...)],
    [...
     Input('portfolio_views_exposure_industry_dropdown', 'value'),
     ...
     ])
@cache.memoize(timeout=TIMEOUT)
def update_portfolio_utilization_hist_callback(..., industry_group, ...):
    ...some operations using industry_group

【问题讨论】：

每个组件只需要一个ID。在回调定义中，只需使用相同的 ID 并引用您想要的 prop，options 或 value。
@coralvanda 你能详细说明一下吗？哪个回调定义？如何使用相同的 ID？第二个回调定义中的“值”是用户在下拉菜单中所做的选择，而（假设options 你的意思是data）是菜单中可能的选择。一个是上游，另一个是下游，所以我如何使用相同的 ID
nvm 我明白了。谢谢@coralvanda

标签： python html plotly-dash

【解决方案1】：

我得到了答案。 @coralvanda 是正确的。看了一下文档，在下拉菜单前面加了一个 dummy_div 来初始化回调函数。这是我得到的：

    @app.callback(
    [Input('dummy_div', 'children'),
    Input('my-date-picker-single', 'date'),],
    [Output("portfolio_views_exposure_industry_dropdown", 'options'),
    Output("portfolio_views_exposure_industry_dropdown", "value")])
    def get_industry_grps(date):
        ...some operations...
        out1 = [{'label': 'abc', 'value': 'abc'},
               {'label': 'def', 'value': 'def'},
               {'label': "ghi", 'value': "ghi"},
               {'label': 'jkl', 'value': 'jkl'}]
        out2 = ['abc','def','ghi','jkl']
        return out1, out2
    
    
    html.Div(id='Dummy_div') #added to initialize get_industry_grps, otherwise it doesn't run until manually interact with the date picker
    
    html.Div([
              dbc.FormGroup(
                           [
                           dbc.Label("Industry Filter:", width=2, align='center',),
                           dbc.Col(
                           dcc.Dropdown(
id="portfolio_views_exposure_industry_dropdown",
multi=True), ...........style stuff #(deleted to save space)
    
    
    #... everything else is the same

【讨论】：

干得好！