Problems filtering table contents using select

Question

Problems filtering table contents using select

Navigation

#1 by (0 votes)

2

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

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

For example, if I selected the genre "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 genre is changed, I would like it to return to the blank table with the modal select.

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

Here is 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><divclass="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>

javascript html jquery css

asked by anonymous 04.05.2018 / 15:08

1 answer

How to make a text overlay a div with image? File management similar to Google Drive

score 0 · Accepted Answer

I set up 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><selectid="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>