As popular several select

Question

I managed to make the second select (player) automatically load according to the first selected (tournament). I need to make the third (game) load according to the second. In my case, I have a team, which carries a list of players who participate (or not) in games on certain dates. I need to choose the player and click on the third select the list of match dates he participated in. If he did not participate in any, drop an MSG and gave. I even implemented the code according to how I clicked on the first select, but the third select (tournament) disappears from the screen when I select the second (player). Any idea?

form inside the page:

<form method="POST" action="">
    <select name="ID_torneio" id="ID_torneio">
         <option value="">Escolha o torneio</option>
         <?php
             $Sql_Query = "SELECT * FROM dbo.Torneios ORDER BY nomeTorneio";
             $stmt = sqlsrv_query($conn,$Sql_Query);                     
             while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC)){
                 echo "'<option value=".$row['ID_torneio'].">".$row['nomeTorneio']."</option>";    
               } 
         ?>
    </select>

    <span class="carregando">Sem resultados</span>
    <select name="ID_atleta" id="ID_atleta">
         <option value="">Escolha o atleta</option>
    </select>

    <select name="ID_jogo" id="ID_jogo">
         <option value="">Escolha o jogo</option>                                        
    </select>
</form>

Script for jquery:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.4.2");
</script>

<script type="text/javascript">
    $(function(){
       $('#ID_atleta').change(function(){
            if( $(this).val() ) {
                $('#ID_jogo').hide();
                $('.carregando').show();
                $.getJSON('select_jogo_por_atleta_escolhido.php?search=',{ID_atleta: $(this).val(), ajax: 'true'}, function(j){
                    var options = '<option value="">Escolha o jogo</option>';
                    for (var i = 0; i < j.length; i++) {
                        options += '<option value="' + j[i].id + '">' + j[i].nome_jogo + '</option>';    
                    }    
                    $('#ID_jogo').html(options).show();
                    $('.carregando').hide();
                });
            } else {
                $('#ID_jogo').html('<option value="">Escolha o jogo</option>');
            }
       });
    });
</script>

PHP Json search and mount code:

<?php   
    include_once("conexao.php");

    $ID_atleta = $_REQUEST['ID_atleta'];

    $r1 = "SELECT dataJogo FROM dbo.Table WHERE atleta = $ID_atleta AND passeErrado>0 AND chuteAgol>0 AND perdida>0 AND interceptacao>0 ORDER BY dataJogo DESC";
    $stmt1 = sqlsrv_query($conn,$r1);       
    while( $rowData = sqlsrv_fetch_array( $stmt1, SQLSRV_FETCH_ASSOC)){
                $nomes_atletas_json[] = array(          
                    'id'    => $row_sub_cat['dataJogo'],
                    'data_jogo' => utf8_encode($row_sub_cat['dataJogo']),
        );
    }
    echo(json_encode($nomes_atletas_json));
?>

Return from the bank, where are the date dice of games per player:

Result before selecting the player

Select after selecting the player: the game’s select is missing (brings the date)

Answer 1

I solved it. It always uses the name of the previous select as a request in the PHP code that will popular the next select. In the first select it uses direct PHP. In the second select, it takes the first javascript code below. In the third select, it picked up by the second javascript below.

                        <select name="ID_torneio" id="ID_torneio">
                             <option value="">Escolha o torneio</option>
                             <?php
                                  $Sql_Query = "SELECT * FROM torneios ORDER BY nomeTorneio";
                                  $stmt = mysqli_query($conn, $Sql_Query);
                                  if ($result=mysqli_query($conn,$Sql_Query))
                                  {
                                       while ($row=mysqli_fetch_array($result))
                                       {
                                            echo "<option value=".$row['ID_torneio'].">".$row['nomeTorneio']."</option>"; 
                                       }
                                  }
                             ?>
                        </select>

                        <span class="carregando">Sem resultados</span>
                        <select name="ID_atleta" id="ID_atleta">
                             <option value="">Escolha o atleta</option>
                        </select>
                         <span class="carregando">Sem resultados</span>
                        <select name="ID_jogo" id="ID_jogo">
                             <option value="">Escolha o jogo</option>                                        
                        </select>




   //Seleciona o torneio e busca os atletas cadastrados nele        

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
          <script type="text/javascript">
            google.load("jquery", "1.4.2");
          </script>

          <script type="text/javascript">
          $(function(){
               $('#ID_torneio').change(function(){
                    if( $(this).val() ) {
                         $('#ID_atleta').hide();
                         $('.carregando').show();
                         $.getJSON('select_atletas_por_torneio_escolhido.php?search=',{ID_torneio: $(this).val(), ajax: 'true'}, function(j){
                              var options = '<option value="">Escolha o atleta</option>';

                              for (var i = 0; i < j.length; i++) {
                                   options += '<option value="' + j[i].id + '">' + j[i].nome_atleta + '</option>';
                              }    
                              $('#ID_atleta').html(options).show();
                              $('.carregando').hide();
                         });
                    } else {
                         $('#ID_atleta').html('<option value="">– Escolha o atleta –</option>');
                    }
               });
          });
          </script>


        //Seleciona o atleta e busca todos o jogos que ele teve alguma ação registrada, mínima que seja  
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
          <script type="text/javascript">
            google.load("jquery", "1.4.2");
          </script>

          <script type="text/javascript">
          $(function(){
               $('#ID_atleta').change(function(){
                    if( $(this).val() ) {
                         $('#ID_jogo').hide();
                         $('.carregando').show();
                         $.getJSON('select_jogo_por_atleta_escolhido.php?search=',{ID_atleta: $(this).val(), ajax: 'true'}, function(j){
                              var options = '<option value="">Escolha o jogo</option>';
                              for (var i = 0; i < j.length; i++) {
                                   options += '<option value="' + j[i].id + '">' + j[i].dataJogo + '</option>';

                              }    
                              $('#ID_jogo').html(options).show();
                              $('.carregando').hide();
                         });
                    } else {
                         $('#ID_jogo').html('<option value="">Escolha o jogo</option>');
                    }
               });
          });
          </script>

PHP (one of them)

<?php   
    include_once("conexao.php");

    $ID_atleta = $_REQUEST['ID_atleta'];
    //$ID_atleta = "Bage";

    $sql1 = "SELECT DISTINCT dataJogo FROM eventos WHERE atleta='$ID_atleta' AND passeErrado>'0' AND chuteAgol>'0' AND perdida>'0' AND interceptacao>'0'";

    if ($result = mysqli_query($conn, $sql1)) {
        while ($row_sub_cat = $result->fetch_array()) {
            $sub_categorias_post[] = array(         
                'id'    => date('d/m/Y', strtotime($row_sub_cat['dataJogo'])),
                'dataJogo' => date('d/m/Y', strtotime($row_sub_cat['dataJogo'])),
            );
        }
    }
    echo(json_encode($sub_categorias_post));
?>