Dash多选Dropdown含不同类型同值项时删除异常求助

问题描述 #

开发Dash应用时，使用开启multi模式的dcc.Dropdown组件，选项包含不同数据类型的值，其中存在值为"1"（字符串类型）和1（整数类型）的项。可以同时选中这两个选项，但删除其中任意一个时，两个选项会被同时移除，预期是能单独移除对应类型的项。

实现代码 #

import dash
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

dbc_css = (
    "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@V1.0.2/dbc.min.css"
)

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

div_one = html.Div(id="div_one")

options = ["Montreal", "Paris", "1", "#99", 1]
value = ["Paris", "Montreal"]

dd = dcc.Dropdown(
    id="dd",
    options=options,
    value=value,   
    multi=True,
)

@app.callback(
    dash.dependencies.Output("div_one", "children"),
    dash.dependencies.Input("dd", "value"),
)
def process(val):
    print(f"{val=} and {type(val)=}")
    
    for v in val:
        print(f"{v=} and {type(v)=}")

    return val


app.layout = dbc.Container(html.Div([dd, div_one]))

if __name__ == "__main__":
    app.run(host="0.0.0.0", port="8001", debug=True)

问题根源 #

Dash的dcc.Dropdown组件底层依赖前端JavaScript实现，JavaScript在处理选项匹配时，会将所有值转换为字符串进行比较。"1"（字符串）和1（整数）转换为字符串后都是"1"，前端无法区分这两个选项，因此删除其中一个时，会把所有字符串化后等于"1"的选项一并移除。

解决方案 #

不要直接传入简单类型列表作为options，改用字典格式的选项列表，明确指定label（前端显示文本）和value（后端实际传递值）。这样即使label相同，value可保留原始类型，前端通过label展示，后端通过value区分独立选项。

修改后的options定义如下：

options = [
    {"label": "Montreal", "value": "Montreal"},
    {"label": "Paris", "value": "Paris"},
    {"label": "1", "value": "1"},  # value为字符串类型
    {"label": "#99", "value": "#99"},
    {"label": "1", "value": 1}     # value为整数类型，与上方label一致但类型不同
]

修改后，"1"和1会被视为独立选项，删除时只会移除选中的那一项，符合预期需求。

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