Show content according to Select

Question

How do I make that when the user selects the drive, show the div of the contents according to the selected drive? It would 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>

Answer 1

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

OBS: I just made the first two options working for you to make the rest go seeing how the dynamics 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>
  
    <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>

Source I used for reference

Answer 2

You can use jQuery for this, but insert the divs within a div-mother to have a reference of how to select divsisters. In the example, I included the divs in a div-mother <div id="unidades">. With this, you can take the value of name of option selected which is the same name as the div who wants to show:

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

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>