1

Como faço para que quando o usuário selecionar a unidade, mostre a div do conteúdo de acordo com a unidade selecionada? Seria com 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>

2 Respostas 2

2

Aqui tem uma opção que usa o ID com o mesmo nome do value do option, assim facilita e poupa algumas linhas de código. Repare que que o valor do value é o mesmo do ID, assim vc consegue uma regra que quando vc selecionar o value="X" ele mostra a div que tenha o id="X"

OBS: Só fiz as duas primeira opções funcionando para vc fazer o resto ir vendo como funciona a dinâmica

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

Fonte que usei de referência

1

Pode usar jQuery para isso, mas insira as divs dentro de uma div-mãe para ter uma referência de como selecionar divs irmãs. No exemplo, incluí as divs numa div-mãe <div id="unidades">. Com isso, você pode pegar o valor do name da option selecionada que é o mesmo nome da classe da div que quer mostrar:

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

Em JavaScript puro

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>

3
  • Jovem isso $("."+$(":selected", this).attr("name"), "#unidades").show().siblings().hide(); é a mesma coisa que vc escreveu, ou se eu colocar tudo em uma linha seria errado?
    – hugocsl
    Commented 11/06/2018 às 18:53
  • 1
    Na mesma linha não é errado não. Eu gosto de separar às vezes pq fica mais fácil de ler e alterar.
    – Sam
    Commented 11/06/2018 às 18:55
  • Gostei da metodologia []'s
    – hugocsl
    Commented 11/06/2018 às 19:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .