在破折号中的下拉列表中添加全选选项(&Q；) [英] Add "select-all" option inside a dropdown in Dash

问题描述

我要在多选下拉菜单中添加一个&q；选择-全部&q；选项。因此，默认情况下，右侧有一个用于清除所有值的小‘x’，当我清除所有选项或仅删除其中一些选项(左侧每个选项带有单独的‘x’)时，我都想要一个类似的选项来选择所有内容。

有谁能帮帮忙吗？

推荐答案

功能

dcc.Dropdown的全部选择功能的基本实现可以使用如下回调实现：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()

options = [
    {"label": "New York City", "value": "NYC"},
    {"label": "Montreal", "value": "MTL"},
    {"label": "San Francisco", "value": "SF"},
]

app.layout = html.Div(
    id="dropdown-container",
    children=[
        dcc.Dropdown(
            id="dropdown",
            options=options,
            value=["MTL", "NYC"],
            multi=True,
        ),
        html.Button("SELECT ALL", id="select-all", n_clicks=0),
    ],
)


@app.callback(Output("dropdown", "value"), Input("select-all", "n_clicks"))
def select_all(n_clicks):
    return [option["value"] for option in options]


if __name__ == "__main__":
    app.run_server(debug=True)

所以上面代码的思想是，每次单击select-all按钮时，我们获取所有选项值，并将下拉列表的value属性设置为结果列表。

样式

现在我们可以使用一些css使按钮看起来像是在下拉列表中。在下面的css中，我将按钮放在‘x’的左侧：

#dropdown-container {
  position: relative;
}

#select-all {
  height: 21px;
  position: absolute;
  top: calc(50% - 10.5px);
  right: 50px;
}

这里的想法是提供包含下拉菜单和按钮的容器position: relative。这样我们就可以将position: absolute赋予按钮，并且按钮的绝对位置将相对于dropdown-container。

对于按钮样式，我将top设置为50%减去按钮高度的一半。这是为了使按钮与下拉列表‘x’和插入符号一样垂直居中对齐。

这篇关于在破折号中的下拉列表中添加全选选项(&Q；)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！