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

Question

我正在尝试创建一个包含两个选项的下拉菜单：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没有setchildren属性。Dash无法处理未设置的默认值，因此您可以通过如下显式设置来解决此问题：

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

在此之后，回调应该可以工作