Tengo dos menús selectos. Un menú está oculto. Si se selecciona una opción específica del Menú 1, aparecerá el Menú 2. Si se selecciona una selección que no forma parte de la condición, el Menú 2 debería desaparecer.
Si selecciono Acusado , Menor o Testigo , el Menú 2 permanece oculto (como se esperaba).
Si selecciono Servicios Sociales , aparecerá el Menú 2. Si selecciono Fiscalía, entonces el Menú 2 no aparece.
Si solo selecciono Fiscalía , entonces no aparece nada. Está destinado a mostrar el Menú 2.
No estoy seguro de lo que estoy haciendo mal.
¿No tengo permitido usar || en una declaración ternaria?
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) siempre se evaluará como true y this.value == true no es lo que desea.
Compruebe las condiciones por separado (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>Tienes que usar el || operador entre dos comparaciones (no dos valores).
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>