如何实现选中指定select选项时显示另一select？代码逻辑异常求助

有两个select菜单，form2默认隐藏。需求是：当id为form1的菜单选中特定选项时显示form2，选中其他选项时隐藏form2。
预期效果：选中Defendant、Minor、Witness时，form2保持隐藏（符合预期）；选中Social Services、Prosecution时，form2显示。但实际选中Prosecution时，form2并未显示。
疑惑点：是否可以在三元运算符中使用||？

原代码如下：

document.getElementById("form1").addEventListener("change", function () {
  var style = this.value == (4 || 5) ? "block" : "none";
  document.getElementById("form2").style.display = style;
});

<select id="form1" name="form1">
  <option value="1">Defendant</option>
  <option value="2">Minor</option>
  <option value="3">Witness</option>
  <option value="4">Social Services</option>
  <option value="5">Prosecution</option>
</select>
<select id="form2" name="form2" style="display: none;">
  <option value="1">Legal Services</option>
  <option value="2">Social Services</option>
  <option value="3">Prosecutor's Office</option>
</select>

问题原因 #

你写的this.value == (4 || 5)逻辑错误。4 || 5会先进行逻辑运算，因为4是真值，运算结果直接为4。这就导致只有当this.value等于4时条件才成立，等于5时条件不满足，所以选中Prosecution（value=5）时form2不会显示。

三元运算符中可以使用||，但必须用在正确的逻辑判断里，不能像这样把多个值用||包裹后直接和目标值比较。

修复方案 #

方案1：拆分逻辑判断

把条件改成分别判断等于4或等于5：

document.getElementById("form1").addEventListener("change", function () {
  var style = this.value == 4 || this.value == 5 ? "block" : "none";
  document.getElementById("form2").style.display = style;
});

方案2：使用数组includes方法（更优雅）

因为select的value是字符串类型，建议用字符串数组判断，避免类型匹配问题：

document.getElementById("form1").addEventListener("change", function () {
  var style = ['4', '5'].includes(this.value) ? "block" : "none";
  document.getElementById("form2").style.display = style;
});

两种方案都能实现预期效果：选中Social Services或Prosecution时显示form2，其他选项隐藏。

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