Select Encadeado Pastas

by Rapha Souza

HTML

<select name="diretoria"> 
    <option value="">Diretoria</option> 
    <option value="DirExe">DIRETORIA EXECUTIVA</option> 
    <option value="DirAdmPes">DIRETORIA ADMINISTRATIVA E DE PESSOAS</option> 
     
</select>
<br>
<select name="gerencia">
<option value="">Selecione</option>
<option class="DirExe" value="227">DIRETORIA EXECUTIVA</option> 
  <option class="DirExe" value="226">AUDITORIA INTERNA / EXTERNA</option> 
  <option class="DirExe" value="225">GOVERNANCA CORPORATIVA</option> 
 
  
    <option class="DirAdmPes" value="230">DIRETORIA ADJUNTA E ADMINISTRATIVA</option> 
  <option class="DirAdmPes" value="229">DIRETORIA ADMINISTRATIVA DE PESSOAS</option> 
  
</select>

<select name="area">
<option class="ma" value="cidade1">Cidade 1</option> 
  <option class="ma" value="cidade1">Cidade 2</option> 
  <option class="sp" value="cidade1">Cidade 3</option> 
  <option class="ro"  value="cidade1">Cidade 4</option> 
  <option class="ro" value="cidade1">Cidade 5</option> 
  <option class="ma" value="cidade1">Cidade 6</option> 
  <option class="sp" value="cidade1">Cidade 7</option> 
  <option class="ro" value="cidade1">Cidade 8</option> 
  <option class="sp" value="cidade1">Cidade 9</option>
  
    <option class="df" value="Taguatinga">Taguatinga</option> 
  <option class="df" value="Samambaia">Samambaia</option> 
  <option class="df" value="Guara">Guara</option> 
</select>

JavaScript

$('[name="diretoria"]').click(function(){

// ocultando todas
$('[name="gerencia"] option').css('display', 'none');
 
 $('[name="area"] option').css('display', 'none');
 
 
// exibindo as do estado selecionado
$('[name="gerencia"] .' + $(this).val()).css('display', '');

$('[name="area"] .' + $(this).val()).css('display', '');
});