1

Tengo 3 divs con los cuales quiero cambiar el contenido cada vez que cambie el option select, pero al ejecutar en el navegador no hace lo que espero que haga, sera que me falta algo para poder hacer que funcione?Vista de contenido en el navegador

function seleccionado(){
    var opt = $('#opcion').val();
   // alert(opt);
    if(opt==cat){
        $('#categoria').show();
        $('#subategoria').hide();
        $('#producto').hide();
    }else{
        if(opt==subcat){
            $('#categoria').hide();
            $('#subategoria').show();
            $('#producto').hide();
        }else{
            $('#categoria').hide();
            $('#subategoria').hide();
            $('#producto').show();
        }
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span4" id="selDiv">
            <select class="selectpicker" data-style="btn-danger" id="opcion" name="opcion" onchange="seleccionado()" >
            <option selected value="cat">Categorias</option>
            <option value="subcat">Subcategorias</option>
            <option value="prod">Productos</option>
            </select>
        </div> 
 
 <div id="contenido">
        </div>    
            
        <!--Show Product Categories List-->
        
         <div id="categoria" style="display:none;">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="center">Lista de Categorias</h3>
                </div>
            </div>
        <div>
        
<div id="subcategoria" style="display:none;">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="center">Lista de Subcategorias</h3>
                </div>
            </div>
        <div>
<div id="producto" style="display:none;">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="center">Lista de Productos</h3>
                </div>
            </div>
        <div>

1
  • 1
    Te he añadido al snippet el enlace a Jquery, pero te dice que no tienes definida la variable cat. puedes arreglarlo para que se pueda ejecutar? Un saludo
    – lois6b
    Commented el 18 abr. 2017 a las 16:01

2 respuestas 2

2

Tu código presenta varios problemas:

  1. Comparas el valor de opt con la svariables cat y subcat cuando realmente lo deberías estar comparando con los literales "cat" y "subcat".
  2. El id de la sección es #subcategoria, pero en tu JavaScript escondes/muestras la sección con id #subategoria (falta una c), por lo que esa sección nunca se mostrará.
  3. No cierras correctamente las secciones: tienes un <div> en lugar de un </div>, lo que hace que todas las categorías estén dentro de la primera y por eso nucnca se muestren.

Corrigiendo esos tres fallos, el código ya funciona:

function seleccionado(){
    var opt = $('#opcion').val();
    
   // alert(opt);
    if(opt=="cat"){
        $('#categoria').show();
        $('#subcategoria').hide();
        $('#producto').hide();
    }else{
        if(opt=="subcat"){
            $('#categoria').hide();
            $('#subcategoria').show();
            $('#producto').hide();
        }else{
            $('#categoria').hide();
            $('#subcategoria').hide();
            $('#producto').show();
        }
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span4" id="selDiv">
            <select class="selectpicker" data-style="btn-danger" id="opcion" name="opcion" onchange="seleccionado()" >
            <option selected value="cat">Categorias</option>
            <option value="subcat">Subcategorias</option>
            <option value="prod">Productos</option>
            </select>
        </div> 
 
 <div id="contenido">
        </div>    
            
        <!--Show Product Categories List-->
        
         <div id="categoria" style="display:none;">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="center">Lista de Categorias</h3>
                </div>
            </div>
        </div>
        
        <div id="subcategoria" style="display:none;">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="center">Lista de Subcategorias</h3>
                </div>
            </div>
        </div>
        
        <div id="producto" style="display:none;">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="center">Lista de Productos</h3>
                </div>
            </div>
        </div>

2
  • Aparte de eso, podrías simplificar el código si usases clases y el ID de las secciones coincidiera con el valor de la lista desplegable. Sólo tendrías que esconder todas las secciones usando su clase y mostrar la única que tuviera el ID con el mism valor que la opción seleccionada
    – Alvaro Montoro
    Commented el 18 abr. 2017 a las 16:22
  • Gracias por tu colaboracion soy nuevo en desarrollo y voy aprendiendo cada dia, tus observaciones me ayudan mucho.
    – M.Antonio
    Commented el 18 abr. 2017 a las 18:21
1

Hola he creado un ejemplo espero te sea de ayuda, el problema con tu código posiblemente es en el momento de hacer la llamada a tu función.

$(function() {

  $("#inputSelect").on('change', function() {

    var selectValue = $(this).val();
    switch (selectValue) {

      case "1":
        $("#div1").show();
        $("#div2").hide();
        $("#div3").hide();
        break;

      case "2":
        $("#div1").hide();
        $("#div2").show();
        $("#div3").hide();
        break;

      case "3":
        $("#div1").hide();
        $("#div2").hide();
        $("#div3").show();
        break;

    }

  }).change();

});
.divOculto {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<body>
  <div class="container">
    <div class="row">
      <legend>Ejemplo</legend>
      <div class="col-md-4">
        <select name="select" id="inputSelect" class="form-control" required="required">
					<option value="1">Div 1</option>
					<option value="2">Div 2</option>
					<option value="3">Div 3</option>
				</select>
      </div>
    </div>
    <div class="row divOculto" id="div1">
      <h3>Soy el Div #1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut neque, pariatur quia eveniet aliquid officiis ipsam fugiat, facilis laudantium ullam nemo sequi rem voluptatem corporis debitis quidem, labore nostrum eum.</p>
    </div>
    <div class="row divOculto" id="div2">
      <h3>Soy el Div #2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt necessitatibus sapiente aperiam modi dolor. Officiis sed laudantium deleniti sapiente dignissimos est expedita placeat ea hic facilis quia quod ut, illo.</p>
    </div>
    <div class="row divOculto" id="div3">
      <h3>Soy el Div #3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam illo laudantium veniam adipisci earum iusto voluptas quod tempora. Reprehenderit eos culpa laudantium totam nam voluptatum soluta ex consequuntur iste distinctio?</p>
    </div>
  </div>

</body>

Ejemplo Mostrar Ocultar Divs con un select - JSFidle

1
  • aquí en stack overflow también existen los snippets. Considera utilizarlo en lugar de añadir uno externo
    – Rene Limon
    Commented el 18 abr. 2017 a las 16:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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