Tengo el siguiente código que muestra/oculta un div basado en una opción en un menú desplegable, sin embargo, solo cambia cuando un usuario selecciona 1. Hay algunos elementos en mi menú desplegable para los que me gustaría mostrar el DIV. Por ejemplo, digamos que tengo valores del 1 al 8 en mi menú desplegable y quiero mostrar un DIV cuando un usuario ha seleccionado 4, 6 y 7. No quiero que el DIV se desactive y se oculte si un usuario cambia selección de 4 a 6 cualquiera.
$(document).ready(function(){ $('#TypeofAction').on('change', function() { if ( this.value == '1') //.....................^....... { $("#business").show(); } else { $("#business").hide(); } }); });Use una matriz para almacenar los valores "On" y verifíquelo usando la variable de visualización booleana en la palanca de jquery:
$(document).ready(function() { $('#TypeofAction').on('change', function() { let onVals = ["4", "6", "7"]; $("#business").toggle(onVals.includes(this.value)); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="TypeofAction"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <div id="business">It's busness time!</div>Puede usar switch() o puede escribir if/else de una manera completamente diferente... pero aquí está:
switch (this.value) { case '1': case '4': case '6': case '7': $("#business").show(); break; case '2': $("#business").hide(); break; case '3': console.log('do something else..'); break; default: console.log('Invalid selection..'); }Más información aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
También puede seguir la ruta de usar múltiples condiciones if:
if ( this.value == 1 || this.value == 4 || this.value == 6 || this.value == 7 ) { ... }elseif( this.value == 2 || this.value == 3 ){ ... }else{ ... } O puede agregar los valores válidos en una matriz y verificar con indexOf()
if ([1,4,6,7].indexOf(this.value) > -1){ ... } o reemplace indexOf() con include( includes() :
if ([1,4,6,7].includes(this.value)){ ... }