多下拉框表单联动冲突求助：选中值被覆盖如何解决

问题根源 #

原JavaScript函数每次触发onchange事件时，会将所有.pClass元素添加hidePara类隐藏，仅显示当前选中值对应的元素，导致之前其他下拉框的选中项被强制隐藏。

修复方案 #

1. 修改JavaScript逻辑 #

替换原函数为以下代码，每次触发时收集所有下拉框的选中值，统一控制显示/隐藏：

function updateSelections() {
  // 收集所有下拉框的有效选中值（排除空值）
  const selectedValues = Array.from(document.querySelectorAll('form select'))
    .map(select => select.value)
    .filter(val => val && val !== "");
  
  // 先隐藏所有选项元素
  document.querySelectorAll(".pClass").forEach(item => {
    item.classList.add("hidePara");
  });
  
  // 显示所有选中值对应的元素
  selectedValues.forEach(val => {
    const targetElem = document.getElementById(val);
    if (targetElem) {
      targetElem.classList.remove('hidePara');
    }
  });
}

2. 更新HTML中的事件绑定 #

将所有下拉框的onchange事件改为调用新函数：

<form>
  Favorite Breakfast
  <br>
  <select onchange="updateSelections()">
    <option>Select</option>
    <option value='6A'>Pancakes</option>
    <option value='6B'>Waffles</option>
  </select>

  <br>
  <br> Favorite Juice
  <br>
  <select onchange="updateSelections()">
    <option>Select</option>
    <option value='6C'>Orange</option>
    <option value='6D'>Grape</option>
  </select>
</form>

3. 保留原有CSS（无需修改） #

.hidePara {
  display: none;
}

.pClass {
  color: blue;
}

效果说明 #

修改后，无论选择多少个下拉框，所有已选中的选项都会在下方文本中保留显示，不会被后续操作清空。即使扩展到5个下拉框，该逻辑依然适用。

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