19

Gostaria de selecionar uma opção de um <select> e preencher o outro <select> com conteúdo relacionado.

Só vou conseguir fazer isso com as informações guardadas em banco banco de dados ou tem como fazer com array? Como posso fazer isso?

HTML

<select id='cursos'>
    <option>curso 1</option>
    <option>curso 2</option>
</select>

<select id='atividades'>
    <!-- carregar options ao selecionar uma opção no select anterior -->
</select>
2
  • É PHP e MySQL????
    – user6026
    Commented 3/05/2014 às 2:44
  • $dados = $conex->query('SELECT nome, email FROM cadastros'); while ($linha = $dados->fetch(PDO::FETCH_OBJ)) { echo $linha->nome . ' - ' . $linha->email; echo '<br>'; }
    – info
    Commented 13/11/2017 às 13:11

1 Resposta 1

17

Exemplo 1:

Tabelas relacionadas (ufs e cidades)

//ufs
CREATE TABLE `ufs` (
  `ufid` int(11) NOT NULL AUTO_INCREMENT,
  `uf` varchar(2) NOT NULL,
  PRIMARY KEY (`ufid`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8
//cidades
CREATE TABLE `cidades` (
  `cidadeid` int(11) NOT NULL AUTO_INCREMENT,
  `ufid` int(11) NOT NULL,
  `cidade` varchar(45) NOT NULL,
  PRIMARY KEY (`cidadeid`),
  KEY `ufpkufid_idx` (`ufid`),
  CONSTRAINT `ufpkufid` FOREIGN KEY (`ufid`) REFERENCES `ufs` (`ufid`) 
  ON DELETE NO ACTION ON UPDATE NO ACTION
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8

Com essas tabelas criadas e preenchidas crie no PHP uma conexão com seu banco de dados MySQL, com PDO dessa forma:

<?php
    $pdo = new PDO('mysql:dbname=generics;host=localhost', 'root', 'senha', 
                    array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
  • dbname = "nome do seu banco de dados"

  • host = "ip de conexao do seu banco de dados ou localhost se banco for local (127.0.0.1)"

  • aonde está 'root' é o usuário do banco e 'senha' é a senha desse usuário para conectar no seu banco.

Esse conexão vai ser utilizada em todo exemplo, então, crie um arquivo separado com o nome de conn.php (o nome pode ser de sua preferência), e coloque o código no mesmo.

PHP

Nome: combos.php

<?php include 'conn.php'; ?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Combos Dependentes</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body>
<select id="CmbUF"> 
    <option value="">Selecione a UF</option>
    <?php
        foreach($pdo->query('SELECT ufid, uf FROM ufs order by uf') as $row){
            echo '<option value="'.$row['ufid'].'">'.$row['uf'].'</option>';
        }       
    ?>
</select>
<select id="CmbCidade"> 
</select>
<script type="text/javascript">
    $(document).ready(function() {
        $('#CmbUF').change(function(e) {
            $('#CmbCidade').empty();
            var id = $(this).val();
            $.post('call_cidades.php', {ufid:id}, function(data){
                var cmb = '<option value="">Selecione a Cidade</option>';
                $.each(data, function (index, value){
                    cmb = cmb + '<option value="' + value.cidadeid + '">' + value.cidade + '</option>';;
                });
                $('#CmbCidade').html(cmb);
            }, 'json');
        });
    });
</script>
</body>
</html>

A mesma renderizada pelo navegador ficará assim:

inserir a descrição da imagem aqui

O carregamento da UF já acontece por padrão com o carregamento dessa página, ao clicar na UF e escolher alguma na lista a mesma dispara um evento no select (onchange) e enviará informações de requisição Ajax para o servidor. Tudo isso usando o jQuery com $.post.

O arquivo PHP responsável em receber tal requisição tem esse layout:

Nome: call_cidades.php

<?php       
    if (isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && $_SERVER["HTTP_X_REQUESTED_WITH"] === "XMLHttpRequest"){
        include 'conn.php';
        $ufid = filter_input(INPUT_POST, 'ufid', FILTER_SANITIZE_NUMBER_INT);
        if ($ufid){
            $query = $pdo->prepare('SELECT cidadeid, cidade FROM cidades where ufid=? ORDER BY cidade');
            $query->bindParam(1, $ufid, PDO::PARAM_INT);
            $query->execute();          
            echo json_encode($query->fetchAll());
            return;
        }       
    }
    echo NULL;

Após seu processamento, o mesmo retornar um JSON nesse formato:

[{"cidadeid":"5","0":"5","cidade":"BOM JARDIM","1":"BOM JARDIM"},{"cidadeid":"4","0":"4","cidade":"CAMBUCI","1":"CAMBUCI"},{"cidadeid":"3","0":"3","cidade":"RIO DE JANEIRO","1":"RIO DE JANEIRO"}]

Esse JSON vai ser trabalhado no $.each do jQuery carregando o select CmbCidade, e qualquer escolha será carregado a lista referente aquela UF.


Exemplo 2:

Utilizando o plugin Jquery CascadeSelect podemos ter o mesmo efeito do Exemplo 1, fazendo alterações minimas no Combo.php e Call_Cidades.php. Esse plugin utiliza HTTP Método GET e tem uma peculiaridade no retorno da informação (utiliza label e value para o preenchimento do select dependente no formato JSON)

PHP

Nome: combo2.php

<?php include 'conn.php'; ?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Combos Dependentes</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<!--https://code.google.com/p/jquery-cascade/-->
<script src="jquery.cascade-select.js" type="text/javascript"></script>
</head>
<body>
<select id="CmbUF"> 
    <option value="">Selecione a UF</option>
    <?php
        foreach($pdo->query('SELECT ufid, uf FROM ufs order by uf') as $row){
            echo '<option value="'.$row['ufid'].'">'.$row['uf'].'</option>';
        }       
    ?>
</select>
<select id="CmbCidade"> 
</select>
<script type="text/javascript">
    $(document).ready(function() {
        $('#CmbUF').cascade({
                source: "call_cidades2.php",
                cascaded: "CmbCidade",
                extraParams: { ufid: function(){ return $('#CmbUF').val();  } },
                dependentLoadingLabel: "Carregando Cidades ...",
                dependentNothingFoundLabel: "Não existe cidades",
                dependentStartingLabel: "Selecione a UF",
        });     
    });
</script>
</body>
</html>

Nome: call_cidades2.php

<?php           
    if (isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && $_SERVER["HTTP_X_REQUESTED_WITH"] === "XMLHttpRequest"){        
        include 'conn.php';
        $ufid = filter_input(INPUT_GET, 'ufid', FILTER_SANITIZE_NUMBER_INT);
        if ($ufid){
            $query = $pdo->prepare('SELECT cidadeid as value, cidade as label FROM cidades where ufid=? ORDER BY cidade');
            $query->bindParam(1, $ufid, PDO::PARAM_INT);
            $query->execute();          
            echo json_encode($query->fetchAll());
            return;
        }       
    }
    echo NULL;

Obs: No Call_Cidades.php tem vários detalhes de mudança:

  • INPUT_GET agora como forma de resgatar as informações no filter_input.

  • na SQL agora está renomeado para cidadeid as value e cidade as label para padronizar o retorno de acordo com o plugin

Acredito que no Exemplo 2 fica mais tranquilo as alterações.

1
  • 1
    isso mesmo que eu quero :D obrigada :) Commented 3/05/2014 às 17:14

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .