如何根据下拉菜单选中的多个选项控制div的显示隐藏？

问题原因 #

你之前尝试的&&运算符写法不符合JS的判断逻辑规则：逻辑与运算符两侧都需要是完整的判断表达式，你写的后半段'Refuse to answer'是非空字符串，会被JS自动判定为布尔真值，所以整个判断条件等价于element.value != 'None'，自然无法实现同时排除两个选项的效果。

修复方案 #

直接修改showDiv函数的判断逻辑即可，这里提供两种写法：

1. 直接写双条件判断，适合排除选项较少的场景

function showDiv(divId, element) {
  // 同时判断值既不是None，也不是Refuse to answer时才显示div
  document.getElementById(divId).style.display = element.value != 'None' && element.value != 'Refuse to answer' ? 'block' : 'none';
}

2. 数组匹配写法，适合后续可能新增更多排除选项的场景，可维护性更高

function showDiv(divId, element) {
  // 所有需要隐藏div的选项值统一放到这个数组里
  const hideOptionValues = ['None', 'Refuse to answer']
  document.getElementById(divId).style.display = hideOptionValues.includes(element.value) ? 'none' : 'block';
}

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