使用回调动态更改 html div 的内容

Question

我正在尝试创建一个包含 2 个选项的下拉菜单：Village Amenities 和 Town Amenities。如果用户选择这些选项之一，我希望所选选项出现在我在下面创建的 html div 中。

为此，我尝试使用回调，但似乎不起作用。

我的代码如下：

app.layout = html.Div(
    html.Div([

        html.Div(children=[
            dcc.Dropdown(
                id='input',
                options=[{'label': label, 'value': value} for label, value in zip(
                    ['Town Amenities', 'Village Amenties'], ['Town', 'Village'])],
                value="Town Amenties"
            ),
            html.Div(id='ouput'),
        ], style={'width': '20%', 'display': 'inline-block'}),
.......

回调代码如下：

@app.callback(
    Output(component_id='output', component_property='children'),
    [Input(component_id='input', component_property='value')]
)
def update_value(input_data):
    return input_data

如有任何帮助或建议，我们将不胜感激。非常感谢！！

Answer 1

布局中的输出 div 没有设置 children 属性。 Dash 与未设置的默认值作斗争，因此您可以通过如下显式设置来解决此问题：

html.Div(id='ouput', children=[]),

之后回调应该会起作用。

使用回调动态更改 html div 的内容

Dynamically changing content of html div using callbacks

python

python-3.x

plotly

plotly-dash