How to show a div when a select option is selected and hide when unselected?-CodePudding

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>

CodePudding user response：

(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>

CodePudding user response：

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>