3

tengo un pequeño problema con algunas cosas que estoy haciendo en js y que no me estan funcionando bien.
El tema es así: tengo un select donde el usuario elige opciones:

<select id="cobertura" name="cobertura">
  <option value="">Elija una opción...</option>
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
  <option value="3">Opción 3</option>
 </select>

De acuerdo a lo que seleccione el usuario, me va a mostrar o no ciertos "divs" en la página para lo que hago:

<div id="div_1" class="contenido">
   <!-- muestro contenido -->
</div>

<div id="div_2" class="contenido">
   <!-- muestro otro contenido diferente -->
</div>

Ahora bien, cuando el usuario elige la opcion 3, lo que tengo que mostrar son los dos divs para ello hago:

<script type="text/javascript">
   $(document).ready(function(){
     $(".contenido").hide();
     $("#cobertura").change(function(){
        $(".contenido").hide();
        $("#div_" + $(this).val()).show();
     });
   });
 </script>

Ahora bien, esta validación ante el evento del select anda bien, es decir, me muestra solo el div1 en la opcion 1 y solo el div2 en la opción 2 pero no se como construir que me muestre los dos divs con la opcion 3

Alguien puede orientarme ?

3 respuestas 3

4

Sin complicar las cosas, lo que puedes haces es guardar en los option como un atributo el selector del elemento que muestra y asi cuando cambie el opcion seleccionado, obtienes el valor del atributo y lo muestras:

   $(document).ready(function(){
     $(".contenido").hide();
     $("#cobertura").change(function(){
        $(".contenido").hide();
        $($(this).find("option:selected").data("show")).show();
     });
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="cobertura" name="cobertura">
  <option value="">Elija una opción...</option>
  <option data-show="#div_1" value="1">Opción 1</option>
  <option data-show="#div_2"  value="2">Opción 2</option>
  <option data-show="#div_1, #div_2" value="3">Opción 3</option>
 </select>


<div id="div_1" class="contenido">
   contenido 1
</div>

<div id="div_2" class="contenido">
  contenido 2
</div>

Esto lo que hace es que como el opcion 1 solo muestra el #div_1 entonces le asigno el selector del cual va a mostrar y en el caso del 3, entonces el agrego los selectores de los que muestra que son #div_1 y #div_2.

3
  • muy buena opción !!!
    – MNibor
    el 19 dic. 2017 a las 18:38
  • no tendría problema en agregar otros divs si se me ocurriera !!!
    – MNibor
    el 19 dic. 2017 a las 18:41
  • Otra ventaja que tiene es que si los valores de los options cambian de numeros a letras, esta forma te evita tener que editar tambien los id de los div.
    – Einer
    el 19 dic. 2017 a las 18:42
3

Teniendo en cuenta tu estructura y que siempre se vaya a ser esa lógica yo haría una condición que pregunte cuando el valor sea igual a 3, y en caso de ser true entonces que muestre los dos contenedores de contenido:

Te dejo el ejemplo funcional:

$(document).ready(function(){
  $(".contenido").hide();
 
  $("#cobertura").change(function(){
    var valor = $(this).val();
    
    if(valor == 3){
      $(".contenido").show();
    }else{
      $(".contenido").hide();
      $("#div_" + $(this).val()).show();
    }
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="cobertura" name="cobertura">
  <option value="">Elija una opción...</option>
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
  <option value="3">Opción 3</option>
 </select>


<div id="div_1" class="contenido">
   <h1>Contenido 1</h1>
</div>

<div id="div_2" class="contenido">
   <h1>Contenido 2</h1>
</div>

1
  • 1
    qué maestro !!! un millon de gracias !!!
    – MNibor
    el 19 dic. 2017 a las 18:29
1

lo que puedes hacer es comparar si el valor del Select es igual a 3 mostrar todos los elementos mediante su clase algo asi :

    $(document).ready(function () {
        $(".contenido").hide();
        $("#cobertura").change(function () {
            $(".contenido").hide();
            if (($(this).val()) == "3")
            {
                $(".contenido").show();
            }
            else {
                $("#div_" + $(this).val()).show();
            }
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cobertura" name="cobertura">
    <option value="">Elija una opción...</option>
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <option value="3">Opción 3</option>
</select>
<div id="div_1" class="contenido">
    <!-- muestro contenido --><h1>Uno</h1>
</div>

<div id="div_2" class="contenido">
    <h1>Dos</h1>
    <!-- muestro otro contenido diferente -->
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.