Hide dives after selecting another category

Question

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 to div below is only displayed if you select category x for example

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

Follows 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 you to open the div for "y" but hide the div "x".

How do I do it?

Thank you!

Answer 1

You could create an array to indicate which div should be displayed. It would also be a good idea to add a div'desired 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();
    }
});

Answer 2

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

< div id="id_1" class="hide">Div 1< /div> < div id="id_2" class="hide">Div 2< /div> < div id="id_3" class="hide">Div 3< /div> < div id="id_4" class="hide">Div 4< /div>

<select id="sel" class="sel">
    <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>
</select>

 $(document).ready(function() {
        $(".esconder").hide();  
        $("#sel").on("change", function(e){
            var id = $(this).val(); 
            $(".esconder").each(function(){
                if($(this).attr("id") == "id_"+id){
                    $(this).show();
                }
                else{
                    $(this).hide();
                }
            });
        });
    });

Answer 3

There are many ways to solve this. I used this function toggle_visibility(id) which receives the id of an html element, and toggles the state of the element display amid block and none and built the toggle() in order to toggle the visibility of all elements in my html.

So every time you click on my Switch button, the elemetno display be amended

    <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

The logic could be changed to suit a larger amount 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 modified the element value from your select so that each option has a unique value. This way you can link the selected value directly to the id of the div.

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

Answer 4

You can ride a select with the values of div you want to display and then use the jQuery functions on() and each() to verify which the value selected and show the div with even id of the selected value, follow example code and demo:

$('.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>
<select id="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>

Answer 5

I don’t know how your select is, but I believe 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>
<div id="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 questions or if not what you want please let us know;

Answer 6

From what I understand you need to display the div of the category and subcategory, thus:

$('#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>
<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>
     </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>

NOTE: This is a suggested implementation, everything depends on the structure of your HTML, Divs and etc.