Jump to content
Fórum Script Brasil
  • 0

Relacionamento entre Select options


Question

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;        
}
?>
	

Link to post
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      148691
    • Total Posts
      644531
×
×
  • Create New...