能否让dcc.Dropdown多选选项显示在选择菜单内？

方案1：用dash-mantine-components的MultiSelect组件（最省心） #

这个组件原生支持复选框样式的下拉选项，同时自带搜索功能，完全匹配你的需求，不用自己折腾复杂自定义：

from dash import Dash, html
import dash_mantine_components as dmc

app = Dash(__name__)

app.layout = html.Div([
    dmc.MultiSelect(
        label="选择选项",
        placeholder="搜索并选择多个选项",
        data=[
            {"value": "option1", "label": "选项1"},
            {"value": "option2", "label": "选项2"},
            {"value": "option3", "label": "选项3"},
            {"value": "option4", "label": "选项4"},
        ],
        searchable=True,
        nothingFound="无匹配选项",
        style={"width": 300}
    )
])

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

它的下拉面板里每个选项都带复选框，选中后顶部会用整洁的标签形式展示选中项，搜索功能和dcc.Dropdown完全一致。

方案2：自定义dcc.Dropdown的样式（不用加新库） #

如果不想引入额外组件库，直接通过CSS给dcc.Dropdown的下拉选项加复选框样式：

1. 给dcc.Dropdown加个ID，比如multi-dropdown
2. 在项目的assets文件夹新建styles.css，添加以下样式：

#multi-dropdown .Select-option:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 1px solid #ccc;
    border-radius: 2px;
    vertical-align: middle;
}

#multi-dropdown .Select-option.is-selected:before {
    background-color: #1976d2;
    border-color: #1976d2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* 可选：优化选中项的展示样式 */
#multi-dropdown .Select-value {
    background-color: #e3f2fd;
    border-radius: 4px;
    margin: 2px;
    padding: 2px 6px;
}

3. 在Dash应用里使用这个Dropdown：

from dash import Dash, dcc, html

app = Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(
        id="multi-dropdown",
        options=[
            {"label": "选项1", "value": "option1"},
            {"label": "选项2", "value": "option2"},
            {"label": "选项3", "value": "option3"},
            {"label": "选项4", "value": "option4"},
        ],
        multi=True,
        placeholder="搜索并选择多个选项",
        style={"width": 300}
    )
])

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

这个方法保留了dcc.Dropdown原生的搜索功能，同时让下拉选项显示复选框，视觉效果大幅提升。

方案3：用dash-bootstrap-components组合实现（高度定制） #

如果已经在用dash-bootstrap-components，可以用DropdownMenu结合Input做搜索框，自己实现动态过滤选项：

from dash import Dash, html, dcc, Input, Output, State
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

options = ["选项1", "选项2", "选项3", "选项4", "选项5"]

app.layout = html.Div([
    dbc.DropdownMenu(
        [
            dbc.Input(id="search-input", placeholder="搜索选项...", type="text", className="mb-2"),
            dbc.DropdownMenuItem(
                dbc.Checkbox(id=f"checkbox-{opt}", label=opt),
                className="p-0"
            ) for opt in options
        ],
        label="选择选项",
        id="dropdown-menu",
        style={"width": 300}
    ),
    html.Div(id="selected-values")
])

@app.callback(
    Output("dropdown-menu", "children"),
    Input("search-input", "value"),
    [State(f"checkbox-{opt}", "checked") for opt in options]
)
def update_dropdown_options(search_value, *checked_states):
    filtered_options = [opt for opt in options if search_value.lower() in opt.lower()] if search_value else options
    menu_items = [
        dbc.Input(id="search-input", placeholder="搜索选项...", type="text", className="mb-2"),
        *[
            dbc.DropdownMenuItem(
                dbc.Checkbox(id=f"checkbox-{opt}", label=opt, checked=checked_states[options.index(opt)]),
                className="p-0"
            ) for opt in filtered_options
        ]
    ]
    return menu_items

@app.callback(
    Output("selected-values", "children"),
    [Input(f"checkbox-{opt}", "checked") for opt in options]
)
def show_selected_values(*checked_states):
    selected = [opt for opt, checked in zip(options, checked_states) if checked]
    return html.Div(f"已选: {', '.join(selected)}" if selected else "未选择任何选项")

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

这个方案需要自己处理搜索过滤和复选框状态，但能完全自定义样式，适合需要高度定制的场景。

内容的提问来源于stack exchange，提问作者Archie Marques