Problems to filter table contents using <select>

Question

I have a select with the genres "Male" and "Female", when selecting one of these genres, is shown another select with sports modalities and each of these modalities prints a table.

I am beginner in jQuery and need the tables to be filtered according to the selected option of select.

For example, if I selected the gender "Female" it would show the second select with the modalities, then selecting one of the modalities it would show its respective table below. Changing the mode the table would also be changed, if the gender is changed, I would like it to return to the blank table with the select of the modalities.

When I select another mode, the previous table does not disappear. How could I solve such a problem?

Follow the code I’m using:

jQuery(function($) {
  $('#top-escolas-genero').change(function() {
    var marca = $('#top-escolas-genero').val();
    switch (marca) {
      case 'blank-table':
        $('#blank-table').show();
        $('#table-atletismo-masculino, #table-atletismo-feminino, #table-basquete-masculino, #table-basquete-feminino, #top-escolas-modalidade-masculino, #top-escolas-modalidade-feminino').hide();
        break;
      case 'top-escolas-modalidade-masculino':
        $('#top-escolas-modalidade-masculino').show();
        $('#top-escolas-modalidade-feminino').hide();
        break;
      case 'top-escolas-modalidade-feminino':
        $('#top-escolas-modalidade-feminino').show();
        $('#top-escolas-modalidade-masculino').hide();
        break;
            
      default:
        $('#blank-table').show();
        $('#table-atletismo-masculino, #table-atletismo-feminino, #table-basquete-masculino, #table-basquete-feminino, #top-escolas-modalidade-masculino, #top-escolas-modalidade-feminino').hide();
        break;
    }
  });
  $('#top-escolas-modalidade-masculino, #top-escolas-modalidade-feminino').change(function() {
    var modelo = $(this).val();
      
    if (modelo = ('#' + this.value)){
        $('#' + this.value).show();
        $('#blank-table').hide();
    }
    else {
        $('#' + this.value).hide();
        $('#blank-table').show();
    }
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            
        </div>
        <div class="col-md-6">
               <div class="top-escolas-title">
                   <p class="font-50-40"><span>Top 10</span> Melhores Escolas</p>
               </div>
               <select name="top-escolas-modalidade-masculino" id="top-escolas-modalidade-masculino" style="display:none;" class="select-modalidades font-35-30">
                    <option selected value="blank-table">Modalidade</option>
                    <option data-section="atletismo-masculino" value="table-atletismo-masculino">Atletismo</option>
                    <option data-section="basquete-masculino" value="table-basquete-masculino">Basquete</option>
                    <option data-section="msub14" value="mSub14">Futsal</option>
                    <option data-section="msub17" value="mSub17">Ginástica Artística</option>
                    <option data-section="msub17" value="mSub17">Ginástica Rítmica</option>
                    <option data-section="msub17" value="mSub17">Handebol</option>
                    <option data-section="msub17" value="mSub17">Judô</option>
                    <option data-section="msub17" value="mSub17">Natação</option>
                    <option data-section="msub17" value="mSub17">Society</option>
                    <option data-section="msub17" value="mSub17">Tênis de Campo</option>
                    <option data-section="msub08" value="mSub08">Tênis de Mesa</option>
                    <option data-section="msub17" value="mSub17">Vôlei</option>
                    <option data-section="msub17" value="mSub17">Xadrez</option>
                    <option data-section="msub17" value="mSub17">Patinação</option>
                    <option data-section="msub17" value="mSub17">Jogos Eletrônicos</option>
                </select>
                
                <select name="top-escolas-modalidade-feminino" id="top-escolas-modalidade-feminino" style="display:none;" class="select-modalidades font-35-30">
                    <option selected value="blank-table">Modalidade</option>
                    <option data-section="atletismo-feminino" value="table-atletismo-feminino">Atletismo</option>
                    <option data-section="basquete-feminino" value="table-basquete-feminino">Basquete</option>
                    <option data-section="msub14" value="mSub14">Futsal</option>
                    <option data-section="msub17" value="mSub17">Ginástica Artística</option>
                    <option data-section="msub17" value="mSub17">Ginástica Rítmica</option>
                    <option data-section="msub17" value="mSub17">Handebol</option>
                    <option data-section="msub17" value="mSub17">Judô</option>
                    <option data-section="msub17" value="mSub17">Natação</option>
                    <option data-section="msub17" value="mSub17">Society</option>
                    <option data-section="msub17" value="mSub17">Tênis de Campo</option>
                    <option data-section="msub08" value="mSub08">Tênis de Mesa</option>
                    <option data-section="msub17" value="mSub17">Vôlei</option>
                    <option data-section="msub17" value="mSub17">Xadrez</option>
                    <option data-section="msub17" value="mSub17">Patinação</option>
                    <option data-section="msub17" value="mSub17">Jogos Eletrônicos</option>
                </select>
                
                <select name="top-escolas-genero" id="top-escolas-genero" class="select-genero font-35-30">
                    <option selected class="on.click" value="">Gênero</option>
                    <option data-section="atletismo-masculino" class="on.click" value="top-escolas-modalidade-masculino">Masculino</option>
                    <option data-section="atletismo-feminino" class="on.click" value="top-escolas-modalidade-feminino">Feminino</option>
                </select>
                
                <div id="blank-table" class="end-map modalidades-table"  data-name="blank-table">
                    <?php echo do_shortcode('[table id=31 /]');?> teste 1
                </div>
                
                <div id="table-atletismo-masculino" class="end-map modalidades-table"  style="display:none;" data-name="atletismo-masculino">
                    <?php echo do_shortcode('[table id=1 /]');?> teste 3
                </div>
                
                <div id="table-atletismo-feminino" class="end-map modalidades-table"  style="display:none;" data-name="atletismo-feminino">
                    <?php echo do_shortcode('[table id=2 /]');?> teste 4
                </div>
                
                <div id="table-basquete-masculino" class="end-map modalidades-table" style="display:none;" data-name="basquete-masculino">
                    <?php echo do_shortcode('[table id=3 /]');?> teste 5
                </div>
                
                <div id="table-basquete-feminino" class="end-map modalidades-table" style="display:none;" data-name="basquete-feminino">
                    <?php echo do_shortcode('[table id=4 /]');?> teste 6
                </div>
        </div>
    </div>
</div>

Answer 1

I built an example using jQuery for you, just read the comments carefully.

//Primeiro vamos definir com quem vamos mexer frequentemente:

const
   //Containers, pra fazer os selects abrir e fechar
   $masculinoContainer = $( '#modalidades-masculino-container' ),
   $femininoContainer = $( '#modalidades-feminino-container' ),
   
   //Selects, pra fazer as tabelas abrirem e fecharem
   $genero = $( '#genero' ),
   $modalidadeMasculino = $( '#modalidades-masculino' ),
   $modalidadeFeminino = $( '#modalidades-feminino' ),
   
   //Masculinos, divs onde o id CONTÉM "masculino"
   $masculinos = $( 'div[id*="masculino"]' ),
   
   //Femininos, divs onde o id CONTÉM "feminino"
   $femininos = $( 'div[id*="feminino"]' ),
   
   //Tabelas
   $tabelas = $( '.table-container' );

//Ao selecionar um genero
$genero.change( () => {
  
  //Pega o valor
  switch($genero.val()){
  
    //Caso Masculino
    case 'M':
      //Esconde o feminino  E mostra o masculino
      $femininoContainer.hide() && $masculinoContainer.show();
      break;
      
    //Caso Feminino
    case 'F':
      //Esconde o masculino E mostra o feminino
      $masculinoContainer.hide() && $femininoContainer.show();
    break;
    
    //Senão Esconde Tudo
    default:
       $masculinos.hide() && $femininos.hide() && $tabelas.hide();
    break;
  }
  
} );

//Ao selecionar uma modalidade do Masculino
$modalidadeMasculino.change( () => {
  $femininos.hide() && $tabelas.hide();
  
  //Mostra a tabela com id modalidade-genero selecionados
  $( '#' + $modalidadeMasculino.val() + '-masculino' ).show();
} );

//Ao selecionar uma modalidade do Feminino
$modalidadeFeminino.change( () => {
  $masculinos.hide() && $tabelas.hide();
  
  $( '#' + $modalidadeFeminino.val() + '-feminino' ).show();
} );

.invisible{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- SELECTS -->
<div>
  <select id="genero">
    <option>Escolha um Gênero</option>
    <option value="M">Masculino</option>
    <option value="F">Feminino</option>
  </select>
</div>
<br />
<div class="invisible" id="modalidades-masculino-container">
  <select id="modalidades-masculino">
    <option>Escolha uma Modalidade</option>
    <option value="atletismo">Atletismo</option>
    <option value="basquete">Basquete</option>
  </select>
</div>
<br />
<div class="invisible" id="modalidades-feminino-container">
  <select id="modalidades-feminino">
    <option>Escolha uma Modalidade</option>
    <option value="atletismo">Atletismo</option>
    <option value="basquete">Basquete</option>
  </select>
</div>
<br />

<!-- TABELAS -->
<div class="invisible table-container" id="atletismo-masculino">
  <h3>atletismo-masculino</h3>
</div>
<div class="invisible table-container" id="atletismo-feminino">
  <h3>atletismo-feminino</h3>
</div>
<div class="invisible table-container" id="basquete-masculino">
  <h3>basquete-masculino</h3>
</div>
<div class="invisible table-container" id="basquete-feminino">
  <h3>basquete-feminino</h3>
</div>