dbc.Select() 将下拉菜单设置为必需不会自动勾勒出 DASH 中的空下拉菜单答案

【问题标题】：dbc.Select() setting dropdown to required doesn't automatically outline an empty dropdown in DASHdbc.Select() 将下拉菜单设置为必需不会自动勾勒出 DASH 中的空下拉菜单
【发布时间】：2022-02-08 10:11:49
【问题描述】：

我正在创建一个 plotly-Dash 表单并使用引导程序 dbc.Select() 创建一个下拉列表。当没有选择任何内容时，我希望它像我的dbc.Input() 框一样用红色边框勾勒出来，但它似乎不起作用。我究竟做错了什么？我设置了required = True，就像我设置dbc.Input()一样，但没有轮廓：

dbc.Select(
    id="temperature",
    required=True,
    options=[{'label': 'Heated', 'value': 'Heated'},
             {'label': 'Ambient', 'value': 'Ambient'},
             {'label': 'N/A', 'value': 'N/A'}],
             value=temperature[0]
),

【问题讨论】：

标签： css bootstrap-4 plotly dropdown plotly-dash

【解决方案1】：

不确定为什么必填字段不适用于dbc.Select，但有一种解决方法可以让必填字段为它工作。

您可以通过选择下拉列表的值或使用dcc.Interval 并检查是否为dropdown.value is None 来触发回调。您还可以在下拉列表中添加一个空选项并将检查扩展到dropdown.value is None or dropdown.value == ""，以防用户选择它。如果条件为真，则将 required 属性设置为 true 并将 :required 伪类的一些 css 样式设置为某种颜色（例如 #SOME_INPUT:required {border: 1px solid red;})。

以下内容可以用作模板：

select = dbc.Select(
    id="dropdown-required",
    required=True,
    options=[
            {'label': '', 'value': ''},
            {'label': 'Heated', 'value': 'Heated'},
            {'label': 'Ambient', 'value': 'Ambient'},
            {'label': 'N/A', 'value': 'N/A'}],
)
app.layout = html.Div([select])

@app.callback(
    Output("dropdown-required", "required"),
    Input("dropdown-required", "value")
)
def set_dropdown_required(value):
    res = (
        True if value is None or value == "" 
        else False
    ) 
    return res

还有assets/style.css下的一些css样式：

#dropdown-required:required {
    border: 1px solid red;
}

【讨论】：