I have two select menus. One menu is hidden. If a specific option is selected from the Menu 1, then Menu 2 will display. If a selection not part of the condition is selected, then Menu 2 should go away.
If I select Defendant, Minor, or Witness, then Menu 2 stays hidden (as intended).
If I select Social Services, then Menu 2 will display. If I select Prosecutor's Office, then Menu 2 doesn't display.
If I just select Prosecutor's Office, then nothing displays. It is intended to display Menu 2.
I'm not sure what I'm doing wrong.
Am I not allowed to use || in a ternary statement?
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>(4 || 5) will always evaluate to true and this.value == true isn't what you want.
Check the conditions separately (this.value == 4 || this.value == 5)
document.getElementById("form1").addEventListener("change", function () {
var style = (this.value == 4 || this.value == 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>You have to use the || operator between two comparations (not two values).
document.getElementById("form1").addEventListener("change", function () {
var style = this.value == 4 || this.value == 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>