本文介绍了在破折号中的下拉列表中添加全选选项(&Q；)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要在多选下拉菜单中添加一个&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；)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！