如何基于两个select下拉框选中值双向过滤指定数组数据

实现思路 #

• 首先对原始字符串数组做结构化解析，提前构建「用户-餐品」「餐品-用户」两个映射表，同时存储全量的用户、餐品集合，避免每次过滤都遍历原始数组，提升运行效率
• 维护两个变量分别存储当前选中的用户、餐品值，作为下拉框选项渲染的过滤依据
• 两个下拉框的选中变更事件分别触发对面下拉框的选项重渲染，实现双向过滤联动

完整可运行代码 #

HTML 结构 #

<div>
  <label>选择用户：</label>
  <select id="userSelect">
    <option value="">--请选择--</option>
  </select>
</div>
<div style="margin: 10px 0;">
  <label>选择餐品：</label>
  <select id="foodSelect">
    <option value="">--请选择--</option>
  </select>
</div>

JavaScript 逻辑 #

// 原始数据
const rawArr = ['Sarah:cookie', 'Sarah:french fries', 'Sarah:soup', 'John:cookie', 'John:water', 'John:sandwich']

// 数据预处理，构建映射关系
const userToFoods = {}
const foodToUsers = {}
const allUsers = new Set()
const allFoods = new Set()

rawArr.forEach(item => {
  const [user, food] = item.split(':')
  allUsers.add(user)
  allFoods.add(food)
  // 填充用户对应餐品的映射
  if (!userToFoods[user]) userToFoods[user] = []
  userToFoods[user].push(food)
  // 填充餐品对应用户的映射
  if (!foodToUsers[food]) foodToUsers[food] = []
  foodToUsers[food].push(user)
})

const userSelect = document.getElementById('userSelect')
const foodSelect = document.getElementById('foodSelect')
// 存储当前选中状态
let currentSelectedUser = ''
let currentSelectedFood = ''

// 渲染用户下拉框
function renderUserSelect() {
  userSelect.innerHTML = '<option value="">--请选择--</option>'
  // 选中餐品时过滤用户，否则展示全量用户
  const showUsers = currentSelectedFood ? foodToUsers[currentSelectedFood] : [...allUsers]
  showUsers.forEach(user => {
    const option = document.createElement('option')
    option.value = user
    option.textContent = user
    if (user === currentSelectedUser) option.selected = true
    userSelect.appendChild(option)
  })
}

// 渲染餐品下拉框
function renderFoodSelect() {
  foodSelect.innerHTML = '<option value="">--请选择--</option>'
  // 选中用户时过滤餐品，否则展示全量餐品
  const showFoods = currentSelectedUser ? userToFoods[currentSelectedUser] : [...allFoods]
  showFoods.forEach(food => {
    const option = document.createElement('option')
    option.value = food
    option.textContent = food
    if (food === currentSelectedFood) option.selected = true
    foodSelect.appendChild(option)
  })
}

// 初始化渲染
renderUserSelect()
renderFoodSelect()

// 绑定联动事件
userSelect.addEventListener('change', e => {
  currentSelectedUser = e.target.value
  currentSelectedFood = ''
  renderFoodSelect()
})

foodSelect.addEventListener('change', e => {
  currentSelectedFood = e.target.value
  currentSelectedUser = ''
  renderUserSelect()
})

效果说明 #

• 未选中任何选项时，两个下拉框分别展示全量用户、全量餐品
• 选中指定用户后，餐品下拉框仅展示该用户对应的所有餐品
• 选中指定餐品后，用户下拉框仅展示提供该餐品的所有用户

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