Relacionamento entre Select options

[Roberto Alexandre Levy]

Bom dia pessoal.

Sou novo no forum, alias, este é o primeiro forum que eu entro.

Estou com um "pequeno" problema:

Tenho 3 selects que vão buscar dados do bd, a lógica é a seguinte:

escolho uma unidade esportiva, e ele carrega para mim no outro select todas as atividades esportivas da referida unidade.

Até aí tudo bem, porem, uma atividade esportiva pode ter vários horários diferentes.

O que eu quero fazer...

Abro o select Unidade esportiva:  

 Flamengo

 Fluminense

 Cruzeiro

 Atlético

Escolho  Flamengo.

Vem as modalidades que ele oferece:

Futsal

Volei

Natação

Corrida

Escolho Futsal.

Vem os horários:

07:00 às 08:30

08:45 às 10:15

10:30 às 12:00

Ou seja:

O último select (Horário) tem que receber dados só do Flamengo, só do Futsal e os horários disponíveis.

Segue abaixo BD e o meu código.

PS. Este código foi tirado da internet no site da devmedia criado por Willian, ele da um exemplo com país, estado e cidade e eu estou tentando adaptar para o referido acima.

	*** BANCO DE DADOS ***
	CREATE TABLE `unidades` (
  `id` int(5) NOT NULL,
  `unidade` int(5) NOT NULL,
  `nome` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
	-- --------------------------------------------------------
	--
-- Estrutura para tabela `atividades`
--
	CREATE TABLE `atividades` (
  `id` int(5) NOT NULL,
  `unidade` int(5) NOT NULL,
  `cod_atividade` int(5) NOT NULL,
  `atividade` varchar(150) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
	-- --------------------------------------------------------
	--
-- Estrutura para tabela `horarios`
--
	CREATE TABLE `horarios` (
  `id` int(4) NOT NULL,
  `unidade` int(5) NOT NULL,
  `cod_atividade` int(5) NOT NULL,
  `horario` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 
	 
	 
	*** CONEXAO.PHP
	<?php
function Conectar(){
    try{
        $opcoes = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES UTF8');
        $con = new PDO("mysql:host=localhost; dbname=esportes;", "esportista", "competidor2019", $opcoes);
        return $con;
    } catch (Exception $e){
        echo 'Erro: '.$e->getMessage();
        return null;
    }
}
?>
	 
	*** INDEX.PHP ***
	$(document).ready(function(){
     
    <!-- Carrega as Unidades esportivas -->
    $('#btnUnidades').click(function(e){
        $('#btnUnidades').hide();
        $('#mensagem').html('<span class="mensagem">Aguarde, carregando ...</span>');  
         
        $.getJSON('consulta.php?opcao=unidades', function (dados){
             
           if (dados.length > 0){    
              var option = '<option>Selecione a Unidade Esportiva</option>';
              $.each(dados, function(i, obj){
                  option += '<option value="'+obj.unidade+'">'+obj.nome+'</option>';
              })
              $('#mensagem').html('<span class="mensagem">Total de Unidades encontradas.: '+dados.length+'</span>'); 
              $('#cmbUnidades').html(option).show();
           }else{
               Reset();
               $('#mensagem').html('<span class="mensagem">Não foram encontradas Unidades!</span>');
           }
        })
    })
     
    <!-- Carrega as Modalidades Esportivas -->
    $('#cmbUnidades').change(function(e){
        var unidades = $('#cmbUnidades').val();
        $('#mensagem').html('<span class="mensagem">Aguarde, carregando ...</span>');  
         
        $.getJSON('consulta.php?opcao=atividades&valor='+unidades, 
        function (dados){ 
         
           if (dados.length > 0){    
              var option = '<option>Selecione a atividade esportiva</option>';
              $.each(dados, function(i, obj){
                  option += '<option value="'+obj.unidade+'">'+obj.atividade+'</option>';
              })
              $('#mensagem').html('<span class="mensagem">Total de atividades encontradas.: '+dados.length+'</span>'); 
           }else{
              Reset();
              $('#mensagem').html('<span class="mensagem">Não foram encontradas atividades para essa unidade!</span>');  
           }
           $('#cmbAtividades').html(option).show(); 
        })
    })
     
    <!-- Carrega os Horarios -->
    $('#cmbAtividades').change(function(e){
        var atividades = $('#cmbAtividades').val();
        $('#mensagem').html('<span class="mensagem">Aguarde, carregando ...</span>');  
         
        $.getJSON('consulta.php?opcao=horarios&valor='+atividades, 
        function (dados){
             
            if (dados.length > 0){   
                var option = '<option>Selecione a Cidade</option>';
                $.each(dados, function(i, obj){
                    option += '<option>'+obj.horario+'</option>';
                })
                $('#mensagem').html('<span class="mensagem">Total de Horários encontrados.: '+dados.length+'</span>');
            }else{
                Reset();
                $('#mensagem').html('<span class="mensagem">Não foram encontrados Horários para essa Atividade!</span>');  
            }
            $('#cmbHorarios').html(option).show();
        })
    })
     
    <!-- Resetar Selects -->
    function Reset(){
        $('#cmbUnidades').empty().append('<option>Carregar Unidades</option>>');
        $('#cmbAtividades').empty().append('<option>Carregar Atividades</option>>');
        $('#cmbHorarios').empty().append('<option>Carregar Horários</option>');
    }
});
</script>
	<body>
   <div id="conteudo">
        <p><span class="destaque">Populando selects 
        usando AJAX + JSON + PHP.</span></p>
        <hr />
        <br/>
         
        <div id="unidades">
          <label>Selecione a Unidade:</label>
          <select id="cmbUnidades">
              <option>Carregar Unidades</option>
          </select>
          <input type="button" value="Carregar Unidades"
          id="btnUnidades" class="botao"/>
        </div>
 
        <div id="atividades">
          <label>Selecione a Atividade:</label>
          <select id="cmbAtividades">
              <option>Carregar Atividades</option>
          </select>
        </div>
         
        <div id="horarios">
          <label>Selecione o Horário:</label>
          <select id="cmbHorarios">
              <option>Carregar Horários</option>
          </select>
        </div>
         
        <hr />
        <p><span class="destaque">Mensagens:
        </span></p>
        <div id="mensagem">
             
        </div>
   </div>
</body>
	 
	*** CONSULTA.PHP ***
	<?php
require_once('conexao.php');
$opcao = isset($_GET['opcao']) ? $_GET['opcao'] : '';
$valor = isset($_GET['valor']) ? $_GET['valor'] : ''; 
if (! empty($opcao)){   
    switch ($opcao)
    {
        case 'unidades':
            {
                echo getAllUnidades();
                break;
            }
        case 'atividades':
            {
                echo getFilterAtividades($valor);
                break;
            }
        case 'horarios':
            {
                echo getFilterHorarios($valor);
                break;
            }
    }
}
 
function getAllUnidades(){
    $pdo = Conectar();
    $sql = 'SELECT unidade, nome FROM unidades';
    $stm = $pdo->prepare($sql);
    $stm->execute();
    sleep(1);
    echo json_encode($stm->fetchAll(PDO::FETCH_ASSOC));
$pdo = null;    
}
 
function getFilterAtividades($unidades){
    $pdo = Conectar();
    $sql = 'SELECT unidade, atividade FROM atividades WHERE unidade = ?';
    $stm = $pdo->prepare($sql);
    $stm->bindValue(1, $unidades);
    $stm->execute();
    sleep(1);
    echo json_encode($stm->fetchAll(PDO::FETCH_ASSOC));
$pdo = null;    
}
 
function getFilterHorarios($atividades){
    $pdo = Conectar();
    $sql = 'SELECT horario FROM horarios WHERE cod_atividade = ?';
    $stm = $pdo->prepare($sql);
    $stm->bindValue(1, $horarios);
    $stm->execute();
    sleep(1);
    echo json_encode($stm->fetchAll(PDO::FETCH_ASSOC));
$pdo = null;        
}
?>
	

[Denis Courcy]

Movendo para o forum de PHP.

 

[Roberto Alexandre Levy]

Em 04/07/2019 em 06:46, Denis Courcy disse:

Movendo para o forum de PHP.

 

Como eu entro no forum PHP?

Não achei esta opção.

Como disse, sou novato em foruns.