Streamlit中实现联动Multiselect过滤器的技术问询

核心思路 #

用Streamlit的st.session_state保存两个选择框的状态，避免循环更新问题。每次渲染时，根据当前一个选择框的选中值，动态过滤另一个选择框的可选选项，同时自动清理掉失效的选中值（比如选中的Name在Color过滤后不再存在）。

完整实现代码 #

import streamlit as st
import pandas as pd

# 初始化示例数据
df = pd.DataFrame({
    'Name': ['A', 'A', 'B', 'C', 'D'],
    'Color': ['red', 'green', 'blue', 'green', 'red']
})

# 初始化Session State变量
if 'selected_names' not in st.session_state:
    st.session_state.selected_names = []
if 'selected_colors' not in st.session_state:
    st.session_state.selected_colors = []

# 计算可选的Name选项：根据已选Color过滤
if st.session_state.selected_colors:
    available_names = df[df['Color'].isin(st.session_state.selected_colors)]['Name'].unique().tolist()
else:
    available_names = df['Name'].unique().tolist()

# 计算可选的Color选项：根据已选Name过滤
if st.session_state.selected_names:
    available_colors = df[df['Name'].isin(st.session_state.selected_names)]['Color'].unique().tolist()
else:
    available_colors = df['Color'].unique().tolist()

# 清理失效的选中值（比如之前选的Name不在当前可选列表中）
st.session_state.selected_names = [name for name in st.session_state.selected_names if name in available_names]
st.session_state.selected_colors = [color for color in st.session_state.selected_colors if color in available_colors]

# 渲染两个Multiselect
st.subheader("双向联动过滤器")
selected_names = st.multiselect(
    "选择名称",
    options=available_names,
    default=st.session_state.selected_names,
    key="names_select"
)

selected_colors = st.multiselect(
    "选择颜色",
    options=available_colors,
    default=st.session_state.selected_colors,
    key="colors_select"
)

# 更新Session State
st.session_state.selected_names = selected_names
st.session_state.selected_colors = selected_colors

# 展示过滤后的结果（可选，用于验证）
filtered_df = df.copy()
if selected_names:
    filtered_df = filtered_df[filtered_df['Name'].isin(selected_names)]
if selected_colors:
    filtered_df = filtered_df[filtered_df['Color'].isin(selected_colors)]

st.subheader("过滤后的数据")
st.dataframe(filtered_df)

关键细节说明 #

• Session State的作用：保存选中状态，避免每次组件刷新时丢失选择，同时作为两个选择框联动的状态桥梁。
• 动态过滤逻辑：每次渲染时，根据另一个选择框的当前值重新计算可选选项，确保联动生效。
• 失效值清理：当用户先选了某个选项，后续操作导致该选项不再可选时（比如先选Name=B，再选Color=red），自动从选中列表中移除失效选项，避免显示异常。

测试验证 #

当你选择颜色red和green时，名称的可选列表会自动更新为A、C、D，完全符合需求。

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