Hide div after selecting another category

Navigation
0

Select code 

<select name="category" class="form-control" id="category">
                    <option value="">Escolha uma categoria</option>
                    <optgroup label="Vehicle">
                    <option value="2">Aircraft</option>
                    <option value="3">Automotive Items &amp; Parts</option>
                    <option value="4">Boats &amp; Watercraft</option>
                    <option value="5">Cars</option>
                    <option value="6">Classic Cars</option>
                    <option value="7">Commercial Trucks &amp; Tractor Trailers</option>
                    <option value="8">Off Road Vehicles</option>
                    <option value="9">RV &amp; Motorhomes</option>
                    <option value="10">SUVs</option>
                    <option value="11">Utility &amp; Work Trailers</option>
                    <option value="12">Vans</option>
                    </optgroup>
                    <optgroup label="Sevices">
                    <option value="2">Automotive Services</option>
                    <option value="3">Beauty & Salon Services</option>
                    <option value="4">Caregivers & Baby Sitting</option>
                    <option value="5">Cleaning Services</option>
                    <option value="6">Construction & Remodeling</option>
                    <option value="7">Financial Services</option>
                    <option value="8">Health & Wellness</option>
                    <option value="9">Home Services</option>
                    <option value="10">Insurance</option>
                    <option value="11">Office Services</option>
                    <option value="12">Real Estate Services</option>
                    </optgroup>
                    <optgroup label="Pets">
                    <option value="2">Birds</option>
                    <option value="3">Cats</option>
                    <option value="4">Dogs</option>
                    <option value="5">Fish & Reptile Pets</option>
                    <option value="6">Free Pets to Good Home</option>
                    <option value="7">Horses</option>
                    <option value="8">Pet Supplies</option>
                    </optgroup>
                  </select>

Personal the div below is only displayed if you select the category x for example 

<div id="x">
  bla bla bla
</div>

Follow the js file 

$("#x").hide();

$('#subcategorias').change(function(){
    var valor = $(this).val();
    if(valor){
        if(valor == 3){
            $("#x").show();
        }
    }else{
        $("#x").hide();
    }
});

If I change to category "y" I wanted to open the div referring to "y" but hide the "x" div.

How do I do this?

Thank you!

    
asked by anonymous 03.03.2015 / 17:17

6 answers

1

You can set a select with the values of div you want to display and then use the jQuery functions on() and each() to check which value is selected and show div with same id do value selected, follow sample code and demonstration: 

$('.div-sel').hide();

$('#seletor').on('change', function() {
  var selecionado = $(this).val();

  $('.div-sel').each(function() {
    if ($(this).attr('id') == selecionado) {
      $(this).toggle();
    } else {
      $(this).hide();
    }
  });
});
#seletor {
  position: absolute;
  top: 50px;
  right: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="seletor">
  <option value="">--- Departamentos ---</option>
  <option value="camisas">Camisas</option>
  <option value="calcas">Calças</option>
  <option value="acessorios">Acessórios</option>
</select>

<div id="camisas" class="div-sel">
  <ul>
    <li>Camisa 01</li>
    <li>Camisa 02</li>
    <li>Camisa 03</li>
  </ul>
</div>

<div id="calcas" class="div-sel">
  <ul>
    <li>Calça 01</li>
    <li>Calça 02</li>
    <li>Calça 03</li>
  </ul>
</div>

<div id="acessorios" class="div-sel">
  <ul>
    <li>Acessório 01</li>
    <li>Acessório 02</li>
    <li>Acessório 03</li>
  </ul>
</div>
    
03.03.2015 / 18:43
1

You could create an array to indicate which div should be displayed. It would also be a good idea to add a class to the% desired% s to be able to hide without further difficulties. 

<div id="x" class="div-subcategoria">bla bla bla</div>
<div id="y" class="div-subcategoria">bla bla bla</div>

var divs = [];
divs[3] = "x";
divs[4] = "y";
// ...

$(".div-subcategoria").hide();

$('#subcategorias').change(function() {
    $(".div-subcategoria").hide();

    var valor = $(this).val();
    if (divs[valor]) {
        $("#" + divs[valor]).show();
    }
});
    
03.03.2015 / 17:42
1

Here's an example, of course, you'll need to make some validation changes (whether it's by ID, or something else). But try this logic:

< div id="id_1" class="hide" > Div 1

03.03.2015 / 18:06
1

I do not know how your select is, but I think this would work for you:

EDIT:

Applying your reality now, I believe it fits you: 

$("#1").hide();
$("#2").hide();
$("#3").hide();
var lastOpen = '';
$('#category').on('change', function (e) {
    var input = '#' + $(this).val();
    if ($(input).length) {
        $(input).show();
        $(lastOpen).hide();
        lastOpen = input;
    } else {
        $(lastOpen).hide();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="1">XXXXXXXXXX</div>
<div id="2">222222</div>
<div id="3">zzzzzzzzzz</div>
<select name="category" class="form-control" id="category">
<option value="">Escolha uma categoria</option>
<optgroup label="Vehicle">
    <option value="2">Aircraft</option>
    <option value="3">Automotive Items &amp; Parts</option>
    <option value="4">Boats &amp; Watercraft</option>
    <option value="5">Cars</option>
    <option value="6">Classic Cars</option>
    <option value="7">Commercial Trucks &amp; Tractor Trailers</option>
    <option value="8">Off Road Vehicles</option>
    <option value="9">RV &amp; Motorhomes</option>
    <option value="10">SUVs</option>
    <option value="11">Utility &amp; Work Trailers</option>
    <option value="12">Vans</option>
</optgroup>
<optgroup label="Sevices">
    <option value="2">Automotive Services</option>
    <option value="3">Beauty & Salon Services</option>
    <option value="4">Caregivers & Baby Sitting</option>
    <option value="5">Cleaning Services</option>
    <option value="6">Construction & Remodeling</option>
    <option value="7">Financial Services</option>
    <option value="8">Health & Wellness</option>
    <option value="9">Home Services</option>
    <option value="10">Insurance</option>
    <option value="11">Office Services</option>
    <option value="12">Real Estate Services</option>
</optgroup>
<optgroup label="Pets">
    <option value="2">Birds</option>
    <option value="3">Cats</option>
    <option value="4">Dogs</option>
    <option value="5">Fish & Reptile Pets</option>
    <option value="6">Free Pets to Good Home</option>
    <option value="7">Horses</option>
    <option value="8">Pet Supplies</option>
</optgroup>
</select>

Any doubt or case is not what you want, please let me know;

    
03.03.2015 / 18:58
1

So I understand you need to display the div of category and subcategory, so: 

$('#category').change(function(){
   $('.group').hide(); // oculta qualquer div group
   $('.sub').hide(); // oculta qualquer div sub
   var group ='#'+ $(this.options[this.selectedIndex])
   .closest('optgroup').prop('label'); //grupo que será exibido
   var val = $(this).val(); // Valor do option 
   $(group).show(); // exibe a div de grupos
   $('.sub[data-value='+val+']').show(); // exibe a div da subcategoria
});
.group{display:none;}
.sub{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectname="category" class="form-control" id="category">
     <option value="">Escolha uma categoria</option>
     <optgroup label="Vehicle">
         <option value="2">Aircraft</option>
         <option value="3">Automotive Items &amp; Parts</option>
     </optgroup>
     <optgroup label="Sevices">
          <option value="2">Automotive Services</option>
          <option value="3">Beauty & Salon Services</option>
     </optgroup>
</select>
<div class="group" id="Vehicle">
    <h3>Vehicle</h3>
    <div class="sub" data-value="2">Aircraft</div>
    <div class="sub" data-value="3">Automotive Items &amp; Parts</div>
</div>

<div class="group" id="Sevices">
    <h3>Sevices</h3>
    <div class="sub" data-value="2">Automotive Services</div>
    <div class="sub" data-value="3">Beauty & Salon Services</div>
</div>

OBS: This is an implementation suggestion, it all depends on the structure of your HTML, divs and etc.

    
03.03.2015 / 19:51
1

Several ways to resolve this. I use this toggle_visibility(id) function that gets the id of an html element, and toggles the state of the element display between block and none and construct toggle() in order to toggle the visibility of all elements in my html.

So with every click on my Change button, the display element is changed 

    <script type="text/javascript">
        function toggle_visibility(id) 
        {
            var e = document.getElementById(id);
            if ( e.style.display == 'block' )
                e.style.display = 'none';
            else
                e.style.display = 'block';
        }
        function toggle(){
            toggle_visibility('portfolio');
            toggle_visibility('results') ;
        }
    </script>


    <button onclick="toggle()" >Mudar</button> 


    <div class="visible" id="portfolio" style="display:block">
        <span>div1</span>
    </div>

    <div class"hidden" id="results"style="display:none">
        <span>div2</span>
    </div>

EDIT

Logic could be changed to suit a larger number of divs. 

    <script type="text/javascript">

        var vetor = new Array ("vehicle2", "vehicle3", "vehicle4", "vehicle5", "vehicle6", "vehicle7");



        function show(){
        var e = document.getElementById('category');

        console.log(e.value);

            for (i=0; i < vetor.length; i++){
                document.getElementById(vetor[i]).style.display = 'none';
            }               
            document.getElementById(e.value).style.display = 'block';
        }

    </script>

    <select name="category" class="form-control" id="category" onchange="show();">
                <option value="">Escolha uma categoria</option>
                <optgroup label="Vehicle">
                <option value="vehicle2">Aircraft</option>
                <option value="vehicle3">Automotive Items &amp; Parts</option>
                <option value="vehicle4">Boats &amp; Watercraft</option>
                <option value="vehicle5">Cars</option>
                <option value="vehicle6">Classic Cars</option>
                <option value="vehicle7">Commercial Trucks &amp; Tractor Trailers</option>
                <option value="vehicle8">Off Road Vehicles</option>
                <option value="vehicle9">RV &amp; Motorhomes</option>
                <option value="vehicle10">SUVs</option>
                <option value="vehicle11">Utility &amp; Work Trailers</option>
                <option value="vehicle12">Vans</option>
                </optgroup>
                <optgroup label="Sevices">
                <option value="sevices2">Automotive Services</option>
                <option value="sevices3">Beauty & Salon Services</option>
                <option value="sevices4">Caregivers & Baby Sitting</option>
                <option value="sevices5">Cleaning Services</option>
                <option value="sevices6">Construction & Remodeling</option>
                <option value="sevices7">Financial Services</option>
                <option value="sevices8">Health & Wellness</option>
                <option value="sevices9">Home Services</option>
                <option value="sevices10">Insurance</option>
                <option value="sevices11">Office Services</option>
                <option value="sevices12">Real Estate Services</option>
                </optgroup>
                <optgroup label="Pets">
                <option value="pets2">Birds</option>
                <option value="pets3">Cats</option>
                <option value="pets4">Dogs</option>
                <option value="pets5">Fish & Reptile Pets</option>
                <option value="pets6">Free Pets to Good Home</option>
                <option value="pets7">Horses</option>
                <option value="pets8">Pet Supplies</option>
                </optgroup>
              </select>


    <div   id="vehicle2" style="display:none"  >
        <span>div1 Aircraft</span>
    </div>

    <div  id="vehicle3"style="display:none" >
        <span>div2 Automotive</span>
    </div>

    <div  id="vehicle4"style="display:none" >
        <span>div3 Boats</span>
    </div>

    <div  id="vehicle5"style="display:none" >
        <span>div3 Cars</span>
    </div>

    <div  id="vehicle6"style="display:none" >
        <span>div3 Classic Cars</span>
    </div>

    <div  id="vehicle7"style="display:none" >
        <span>div3 Commercial Trucks &amp; Tractor Trailers</span>
    </div>

I have modified the value element of your select so that each option has a unique value. This way you can link the selected value directly to id of the div.

Using document.getElementById('category').value you have access to the selected value and can display the desired div.

    
03.03.2015 / 18:15
How to insert selecting from two different tables? Define method within the body of an outo method in Java