Show content according to Select

Question

Show content according to Select

Navigation

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

0

How do I, when the user selects the unit, show the content div according to the selected unit? Would it be with jQuery?

<div class="form-group">
  <label>Selecione a unidade</label><br>
  <select class="form-control" id="list-lugar" name="unidade">
    <option value="0" disabled="true" selected="true">Selecione uma Unidade</option>
    <option name="PMA" value="200">PMA</option>
    <option name="BRB" value="200">BRB</option>
    <option name="MTO" value="100">MTO</option>
    <option name="CN" value="100">CN</option>
    <option name="SCS" value="100">SCS</option>
    <option name="TPL" value="100">TPL</option>
    <option name="SBC" value="100">SBC</option>
  </select>
</div>

<div class="PMA">
  <h1>Conteúdo 1</h1>
</div>

<div class="BRB">
  <h1>Conteúdo 2</h1>
</div>

javascript html jquery

asked by anonymous 11.06.2018 / 20:30

2 answers

how to get the opening and closing times and save in two variables with javascript? Add javascript variable in CSS class

score 1 · Answer 1

Here is an option that uses ID with the same name as the value of option , thus easing and saving some lines of code. Note that the value of the value is the same as the ID, so you get a rule that when you select value="X" it shows div that has id="X"

OBS: I just made the first two options working for you to do the rest go see how the dynamic works

  $(function() {
        $('.form-control').change(function(){
            $('.blocos').hide();
            $('#' + $(this).val()).show();
        });
    });

  .blocos {
    display: none;
  }

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><divclass="form-group">
      <label>Selecione a unidade</label><br>
      <select class="form-control" id="list-lugar" name="unidade">
        <option value="0" disabled="true" selected="true">Selecione uma Unidade</option>
        <option name="PMA" value="PMA">PMA</option>
        <option name="BRB" value="BRB">BRB</option>
        <option name="MTO" value="MTO">MTO</option>
        <option name="CN" value="CN">CN</option>
        <option name="SCS" value="SCS">SCS</option>
        <option name="TPL" value="TPL">TPL</option>
        <option name="SBC" value="SBC">SBC</option>
      </select>
    </div>
      
      <div id="PMA" class="blocos">
        <h1>PMA aqui</h1>
      </div>
      
      <div id="BRB" class="blocos">
        <h1>BRB aqui</h1>
      </div>

Source I used reference

score 1 · Answer 2

You can use jQuery for this, but enter the% s of% s inside a div-mother to have a reference of how to select% with s% s. In the example, I include the% s of% s in a div div. div . With this you can get the value of div of div selected which is the same name as the class of <div id="unidades"> you want to display:

$("#list-lugar").change(function(){ // evento change
   $("."+$(":selected", this).attr("name"), "#unidades") // busca a div com a classe dentro da div mãe
   .show()     // mostra a div com a classe vinda do name
   .siblings() // seleciona as divs irmãs
   .hide();    // esconde as divs irmãs
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="form-group">
  <label>Selecione a unidade</label><br>
  <select class="form-control" id="list-lugar" name="unidade">
    <option value="0" disabled="true" selected="true">Selecione uma Unidade</option>
    <option name="PMA" value="200">PMA</option>
    <option name="BRB" value="200">BRB</option>
    <option name="MTO" value="100">MTO</option>
    <option name="CN" value="100">CN</option>
    <option name="SCS" value="100">SCS</option>
    <option name="TPL" value="100">TPL</option>
    <option name="SBC" value="100">SBC</option>
  </select>
</div>

<div id="unidades">
   <div class="PMA">
     <h1>Conteúdo 1</h1>
   </div>
   
   <div class="BRB">
     <h1>Conteúdo 2</h1>
   </div>
</div>

In pure JavaScript

document.querySelector("#list-lugar").onchange = function(){
   var n = this.options[this.selectedIndex].getAttribute("name");
   var d = document.querySelectorAll("#unidades div");
   for(var x=0; x<d.length; x++){
      d[x].style.display = ~d[x].className.indexOf(n) ? "block" : "none";
   }
}

<div class="form-group">
  <label>Selecione a unidade</label><br>
  <select class="form-control" id="list-lugar" name="unidade">
    <option value="0" disabled="true" selected="true">Selecione uma Unidade</option>
    <option name="PMA" value="200">PMA</option>
    <option name="BRB" value="200">BRB</option>
    <option name="MTO" value="100">MTO</option>
    <option name="CN" value="100">CN</option>
    <option name="SCS" value="100">SCS</option>
    <option name="TPL" value="100">TPL</option>
    <option name="SBC" value="100">SBC</option>
  </select>
</div>

<div id="unidades">
   <div class="PMA">
     <h1>Conteúdo 1</h1>
   </div>
   
   <div class="BRB">
     <h1>Conteúdo 2</h1>
   </div>
</div>