Problem when showing and hiding divs with jquery

Question

Problem when showing and hiding divs with jquery

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I have 3 divs with which I want to change the content every time I change the option select, but when I run in the browser it does not do what I expect it to do, will it be that I'm missing something to make it work?

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>

javascript jquery codeigniter

asked by M.Antonio 18.04.2017 в 17:59

source

2 answers

1

Your code has several problems:

You compare the value of opt with the svariables cat and subcat when you really should be comparing it with the literals "cat" and "subcat".

The id of the section is #subcategoria , but in your JavaScript you hide / show the section with id #subategoria (missing a c ), so that section will never be displayed.

You do not close the sections correctly: you have a <div> instead of a </div> , which means that all the categories are within the first one and that's why they are never displayed.

Correcting those three faults, the code already works:

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>

answered by 18.04.2017 в 18:19

Space pointed to with malloc () is not released with free () Ajax UpdatePanel does not work when deployed in IIS8

score 1 · Accepted Answer

Hello, I have created an example, I hope it is helpful, the problem with your code is possibly at the moment of making the call to your function.

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

Example Show Hide Divs with a select - JSFidle