Div（也带id）中的下拉菜单（带id）设置值问题

Posted 2023-02-18

【中文标题】Div（也带id）中的下拉菜单（带id）设置值问题

【英文标题】：Dropdown (with id) within a Div (also with id) problem setting a value

【发布时间】：2021-09-07 20:29:53

【问题描述】：

我正在尝试使用 daq.BooleanSwitch 来显示或隐藏下拉菜单。为了也隐藏所述下拉列表的 html.Label，我给了 Div 一个 id。这样我可以将 Div 的样式从 'display':'block' 更改为 'display':'none' 并隐藏 both 标签和下拉菜单。

我的问题：

-> 不给 div 一个 id，只会导致下拉菜单被隐藏，而不是标签。

--> 给 div 一个 id 会导致我的下拉值 (value=5) 出现此错误：

发生异常：TypeError 字符串索引必须是整数

相关代码：

html.Div([
    daq.BooleanSwitch(
    id='hour_or_day',
    on=True,
    label='Hour/Day',
    labelPosition="bottom",
    color="#002255")])

html.Div( id= 'hide_choosehour' [
    html.Label('Choose hour:'),
    dcc.Dropdown(
    id='hourChoice',
    options=['label': str(i), 'value': str(i) for i in range(24)],
    value = 5,
    )
], style= 'display':'block')


@app.callback(
   Output('hide_choosehour', 'style'),
   Input('hour_or_day', 'on')
)

def show_hide_ChooseHour(on):
    if on:
        return 'display': 'none'
    return 'display': 'block'

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

我找到了一种解决方法，即不使用标签或 hmtl.P（因此不再需要 div id），而是使用带有所需文本的占位符。不过还是很好奇，最好有标签。欢迎任何建议，如果有任何不清楚的地方，请告诉我！

【问题讨论】：

您的代码存在两个问题：第一个 Div 和下拉列表 (hour_or_day) 的 ID 重复。这会导致DuplicateIdError。其次，在第二个div中，id后面少了一个逗号，应该是children=[...]。两个 Div 都应该是 app.layout 的一部分吗？

哎呀。副本不在我的原始代码中，只有这个翻译后的示例代码。但是你帮我解决了我的问题！缺少逗号是一个问题，并且 id 放错了位置。我将 id 移到 div 括号 [] 之后和 style= .. 之前，这解决了我的问题！谢谢

【参考方案1】：

将 div 的 id 移动到括号之后而不是之前解决了我的问题！

html.Div([
    html.Label('Choose hour:'),
    dcc.Dropdown(
    id='hourChoice',
    options=['label': str(i), 'value': str(i) for i in range(24)],
    value = 5),
],id='hide_choosehour', style= 'display':'block')