Dash/Plotly设置multi=true的下拉框如何禁止清空值 保证始终有选项选中

该需求可以通过Dash回调监听值变化+存储历史有效值的方式实现，完全可以避免下拉框被全清空的问题。

实现逻辑 #

• 给下拉框设置非空的初始选中值
• 用dcc.Store组件存储上一次有效的选中值
• 编写回调监听下拉框的value变化：如果检测到当前值为空列表，强制返回上一次存储的有效值，否则更新存储的有效值

完整代码示例 #

import dash
from dash import dcc, html, Input, Output, State, callback

app = dash.Dash(__name__)

app.layout = html.Div([
    # 存储上一次有效的下拉框选中值，初始值和下拉框默认值保持一致
    dcc.Store(id='last_valid_value', data=['选项1']),
    dcc.Dropdown(
        id='multi_dropdown',
        options=[
            {'label': '选项1', 'value': '选项1'},
            {'label': '选项2', 'value': '选项2'},
            {'label': '选项3', 'value': '选项3'}
        ],
        multi=True,
        # 必须设置非空的初始默认值
        value=['选项1']
    ),
    # 业务图表组件
    dcc.Graph(id='target_graph')
])

@callback(
    Output('multi_dropdown', 'value'),
    Output('last_valid_value', 'data'),
    Input('multi_dropdown', 'value'),
    State('last_valid_value', 'data'),
    prevent_initial_call=True
)
def prevent_empty_dropdown(current_val, last_val):
    # 拦截空值情况，返回上一次的有效值
    if not current_val or len(current_val) == 0:
        return last_val, last_val
    # 正常选中时更新存储的有效值
    return current_val, current_val

# 原有图表的回调可以正常写，不受影响
@callback(
    Output('target_graph', 'figure'),
    Input('multi_dropdown', 'value')
)
def update_graph(selected_vals):
    # 此处直接使用selected_vals即可，永远不会为空
    return {
        'data': [{'x': selected_vals, 'y': [len(v) for v in selected_vals], 'type': 'bar'}]
    }

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

注意事项 #

• 初始定义dcc.Dropdown时，必须给value参数设置非空的默认值，不能设为None或者空列表
• 如果有多个多选项下拉框需要加这个限制，可把上述逻辑封装为通用函数复用

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