Jump to content
Camilavip

Preencher combo box em três níveis

Recommended Posts

Queria saber como fazer esse select e quando eu trazer um estado ele já puxa as cidades contidos nele, e ao escolher a cidade ele trazer os bairros. Consegui pela internet mas só com estados e cidades. no caso em 2 níveis, e eu precisaria em 3, faço pelo mysqli

 

Em estados no banco está assim

CREATE TABLE `estados` (
  `id_estado` int(10) NOT NULL,
  `estado` varchar(30) NOT NULL
) ENGINE=Aria DEFAULT CHARSET=latin1;

--
-- Extraindo dados da tabela `estados`
--

INSERT INTO `estados` (`id_estado`, `estado`) VALUES
(1, 'Rio de Janeiro'),
(2, 'Minas Gerais');

Cidades

CREATE TABLE `cidades` (
  `id_cidade` int(10) NOT NULL,
  `id_estado` int(10) NOT NULL,
  `cidade` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Extraindo dados da tabela `cidades`
--

INSERT INTO `cidades` (`id_cidade`, `id_estado`, `cidade`) VALUES
(1, 1, 'Rio de Janeiro'),
(2, 2, 'Belo Horizonte');

E bairros

CREATE TABLE `bairros` (
  `id_bairro` int(10) NOT NULL,
  `id_cidade` int(10) NOT NULL,
  `bairro` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Extraindo dados da tabela `bairros`
--

INSERT INTO `bairros` (`id_bairro`, `id_cidade`, `bairro`) VALUES
(1, 1, 'Centro'),
(2, 1, 'Tijuca'),
(3, 1, 'Leblon'),
(4, 2, 'Pampulha');

 

Share this post


Link to post
Share on other sites

Olha esse termo de selecionar um estado e já carregar cidades nem precisa de um apelo pelo servidor pode ser feito através somente do javascript.

Existe esse maravilhoso script para essa finalidade https://github.com/robertocr/cidades-estados-js

 

Agora o caso do bairro e tal até que daria para fazer um upgrade, mas seria um trabalho minucioso e teria que consultar o senso pra ter uma relação dos bairros de cada cidade. Ou seja daria trabalho pra caramba....

Share this post


Link to post
Share on other sites
20 minutos atrás, Omar~ disse:

Olha esse termo de selecionar um estado e já carregar cidades nem precisa de um apelo pelo servidor pode ser feito através somente do javascript.

Existe esse maravilhoso script para essa finalidade https://github.com/robertocr/cidades-estados-js

 

Agora o caso do bairro e tal até que daria para fazer um upgrade, mas seria um trabalho minucioso e teria que consultar o senso pra ter uma relação dos bairros de cada cidade. Ou seja daria trabalho pra caramba....

Com estados e cidades eu consigo, pois já tenho um que peguei na internet e adaptei.

Mas no caso como mostrei acima não é ter um que já tenha, como visto nas tabelas no banco de dados, tantos os estados, cidades e bairros são cadastrados, e não precisando que já venham todos do Brasil

 

Share this post


Link to post
Share on other sites

O problema dos bairro é que temos mais de 5k de cidades no território brasileiro. Quantos bairros em cada cidade?

É facilmente chegamos a um array com mais de 1/2/3/4...... milhão de índices que teria de ser feito na mão, fora o trabalho de consulta individual de cada.

 

Confesso que faria facilmente isso, mas levaria pelo menos uns 2 meses para catalogar cada bairro em cada cidade e preparar o script para ficar operacional.

Share this post


Link to post
Share on other sites
1 hora atrás, Omar~ disse:

O problema dos bairro é que temos mais de 5k de cidades no território brasileiro. Quantos bairros em cada cidade?

É facilmente chegamos a um array com mais de 1/2/3/4...... milhão de índices que teria de ser feito na mão, fora o trabalho de consulta individual de cada.

 

Confesso que faria facilmente isso, mas levaria pelo menos uns 2 meses para catalogar cada bairro em cada cidade e preparar o script para ficar operacional.

 

Omar, você ainda não entendeu, eu não preciso catalogar os dados, eles vem do banco de dados, eu que cadastro, então não há necessidade de ter tudo, só vai ter o que eu cadastrar. O problema seria em como fazer esse select em 3 níveis, em que quando eu seleciono um ele puxa os outros que estão atrelados ao primeiro.

 

 

Share this post


Link to post
Share on other sites

Ola Camila não sei se eu entende o que queres...

Mais creio que tu queres e cadastrar cada cidade em seu estado e cada bairro em sua cidade correto?

se for isso tu pode seguir este meu exemplo é um pouco simples mais vai ajudar a ter melhor ideia de se fazer

 

tenho um arquivo subbairro.php

<?php 
	header('Access-Control-Allow-Origin: *');
	require_once('../includes/funcoes.php');
	require_once('../database/config.database.php');
	require_once('../database/config.php');

?>

	<option value="">Selecione um Bairro</option>
	<?php 
	if(!empty($_POST["id_categoria"])) 
{
 $id=intval($_POST['id_categoria']);

       $QueryBairro = DBRead('c_bairro','*',"WHERE id_categoria=$id ORDER BY id ASC"); if (is_array($QueryBairro)) { foreach ($QueryBairro as $c_bairro) { 

  $categoria   = $c_bairro['categoria'];
  $id        = $c_bairro['id'];
  $slug        = $c_bairro['slug'];
		// echo 'Categoria de Teste:';
?>
	<option value="<?php echo $c_bairro['id']; ?>"><?php echo $c_bairro['categoria']; ?></option>
		<?php } } } ?>

no seu footer.php coloca este script 

<script>
function getSubcat(val) {
	$.ajax({
	type: "POST",
	url: "subbairro.php",
	data:'id_categoria='+val,
	success: function(data){
		$("#id_categoria").html(data);
	}
	});
}
  </script>

no seu form que será feito as seleções  faz isso aqui

 

									<div class="col-md-6">
											<div class="form-group">
									            <label>Cidade:</label>
									            <select class="form-control select2"  onChange="getSubcat(this.value);" name="id_cidade" required>
											<option value="">Selecione uma cidade</option>
									            	<?php $Query = DBRead('c_cidade','*','ORDER BY categoria ASC'); if (is_array($Query)) { foreach ($Query as $c_cidade) { ?>
									            	<option value="<?php echo $c_cidade['categoria']; ?>"><?php echo $c_cidade['categoria']; ?> | <?php echo $c_cidade['estado']; ?></option>
									            	<?php } } ?>
									         
												</select>
											</div>
											</div>
								<div class="col-md-6">
											<div class="form-group">
									            <label>Bairro:</label>
									            <select class="form-control select2" name="id_bairro" id="id_categoria">
												
									            </select>
											</div>
											</div>	

quando seleciona uma cidade automaticamente carrega todos os bairros daquela tal cidade..

 

sobre o estado é só seguir a mesma lógica....

 

bom espera que possa ser o que queiro

Share this post


Link to post
Share on other sites

Olá!
No trecho js que carrega as cidades em acordo com o estado selecionado,  dispare(trigger) um evento change no select das cidades.

Assim, vai executar o método que carrega bairros em acordo com a cidade selecionada.

 

Dessa forma, pode se encadear(unidirecionalmente) vários selects.
 

Share this post


Link to post
Share on other sites
1 hora atrás, washalbano disse:

Olá!
No trecho js que carrega as cidades em acordo com o estado selecionado,  dispare(trigger) um evento change no select das cidades.

Assim, vai executar o método que carrega bairros em acordo com a cidade selecionada.

 

Dessa forma, pode se encadear(unidirecionalmente) vários selects.
 

Peguei um em um site internacional e fiz várias mudanças, mas ele está trazendo o resultado 0 e não o nome das cidades e bairros.

praticamente funciona tudo. Quando seleciono o estado ele traz um 0, visto que tenho duas cidades somente, ele não traz o nome da cidade. Se seleciono o 0 referente a Belo Horizonte, ele me diz que não tem bairros, porque não tem mesmo nessa tabela que tenho, se seleciono Rio de Janeiro que também aparece 0 e que tem dois bairros, ele traz dois 0

 

Deixando tudo aqui completo, que é o arquivo index.php, o ajaxdata.php, as tabelas do banco e o arquivo de conexão, porém como referi acima, ele está funcionando, porém só não traz os nomes das cidades ou dos bairros, e sim o 0, então é um detalhe que não estou acertando para ao invés do 0 vir os nomes

 

Não sei onde estou errando.

No index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dynamic Dependent Select Box using jQuery, Ajax and PHP</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<?php
  include_once 'config.php';
  $query = "SELECT * FROM estados Order by estado";
  $result = $db->query($query);
?>
<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
    <form>
        <div class="form-group">
          <label for="email">Estado</label>
          <select name="id_estado" id="id_estado" class="form-control" onchange="FetchCidade(this.value)"  required>
            <option value="">Selecione o Estado</option>
          <?php
            if ($result->num_rows > 0 ) {
               while ($row = $result->fetch_assoc()) {
                echo '<option value='.$row['id_estado'].'>'.$row['estado'].'</option>';
               }
            }
          ?> 
          </select>
        </div>
        <div class="form-group">
          <label for="pwd">Cidade</label>
          <select name="id_cidade" id="id_cidade" class="form-control" onchange="FetchBairro(this.value)"  required>
            <option>Selecione a Cidade</option>
          </select>
        </div>

        <div class="form-group">
          <label for="pwd">Bairro</label>
          <select name="id_bairro" id="id_bairro" class="form-control">
            <option>Selecione o Bairro</option>
          </select>
        </div>
      </form>
  </div>
  </div>
</div>
<script type="text/javascript">
  function FetchCidade(id){
    $('#id_cidade').html('');
    $('#id_bairro').html('<option>Selecione o bairro</option>');
    $.ajax({
      type:'post',
      url: 'ajaxdata.php',
      data : { id_estado : id},
      success : function(data){
         $('#id_cidade').html(data);
      }

    })
  }

  function FetchBairro(id){ 
    $('#id_bairro').html('');
    $.ajax({
      type:'post',
      url: 'ajaxdata.php',
      data : { id_cidade : id},
      success : function(data){
         $('#id_bairro').html(data);
      }

    })
  }

  
</script>
</body>
</html>

ajaxdat.php

<?php 
include_once 'config.php';

if (isset($_POST['id_estado'])) {
	$query = "SELECT * FROM cidades where id_estado=".$_POST['id_estado'];
	$result = $db->query($query);
	if ($result->num_rows > 0 ) {
			echo '<option value="">Selecione a cidade</option>';
		 while ($row = $result->fetch_assoc()) {
		 	echo '<option value='.$row['id_cidade'].'>'.$row['cidade'].'</option>';
		 }
	}else{

		echo '<option>Cidade não encontrada</option>';
	}

}elseif (isset($_POST['id_cidade'])) {
	 

	$query = "SELECT * FROM bairros where id_cidade=".$_POST['id_cidade'];
	$result = $db->query($query);
	if ($result->num_rows > 0 ) {
			echo '<option value="">Selecione o Bairro</option>';
		 while ($row = $result->fetch_assoc()) {
		 	echo '<option value='.$row['id_bairro'].'>'.$row['bairro'].'</option>';
		 }
	}else{

		echo '<option>Bairro não encontrado</option>';
	}

}

As tabelas

-- --------------------------------------------------------

--
-- Table structure for table `bairros`
--

CREATE TABLE `bairros` (
  `id_bairro` int(11) NOT NULL,
  `id_cidade` varchar(155) NOT NULL,
  `bairro` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `bairros`
--

INSERT INTO `bairros` (`id_bairro`, `id_cidade`, `bairro`) VALUES
(1, 1, 'Centro'),
(2, 1, 'Copacabana');


-- --------------------------------------------------------

--
-- Table structure for table `estados`
--

CREATE TABLE `estados` (
  `id_estado` int(11) NOT NULL,
  `estado` varchar(155) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `estados`
--

INSERT INTO `estados` (`id_estado`, `estado`) VALUES
(1, 'Rio de Janeiro'),
(2, 'Minas Gerais');

-- --------------------------------------------------------

--
-- Table structure for table `cidades`
--

CREATE TABLE `cidades` (
  `id_cidade` int(11) NOT NULL,
  `id_estado` varchar(155) NOT NULL,
  `cidade` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `cidades`
--

INSERT INTO `cidades` (`id_cidade`, `id_estado`, `cidade`) VALUES
(1, 1, 'Rio de Janeiro'),
(2, 2, 'Belo Horizonte');

-- --------------------------------------------------------

E o arquivo de conexao apenas para deixar tudo aqui

<?php
$host = 'localhost';
$username = 'usuario';
$pass = 'senha';
$db = 'banco';

$db = new mysqli($host,$username,$pass,$db);

if ($db->connect_error) {
	 die("Connection Failed". $db->connect_error);
}

?>

 

Share this post


Link to post
Share on other sites

Acho que saquei a situação.

Você não possui a lista de bairros e será cadastrado por um usuário ou por você periodicamente.

 

Primeiramente a tabela de bairros deve receber uma nova coluna também para identificar o estado

Pois a consulta deve ser estado + cidade + bairro. Pois existem milhares de bairros com nome repetidos em vários estados.

 

E como puxar o bairro?

O primeiro seletor vai carregar o estado onde traremos o ID's dos estados.

SELECT * FROM estados

Compomos o html com as informações

<form method="POST">
  <select name="carregar_cidades">
    <option value="">Selecionar Estado...</option>
    <?php foreach($resultado_do_banco as $value) { ?>
        <option value="<?= $value['id_estado'] ?>"><?= $value['estado'] ?></option>
    <?php } ?>
  </select>
</form>

Ao alterar o valor de carregar_cidades, pegamos o ID do estado e buscamos as cidades com essa informação:

SELECT * FROM cidades WHERE id_estado = '{$id_do_estado}'

Compomos o html do novo seletor com as informações:

<form method="POST">
  <input type="hidden" name="id_estado" value="<?= $id_do_estado ?>" />
  <select name="carregar_bairros">
    <option value="">Selecionar Cidades...</option>
    <?php foreach($resultado_do_banco as $value) { ?>
        <option value="<?= $value['id_cidade'] ?>"><?= $value['cidade'] ?></option>
    <?php } ?>
  </select>
</form>

Ao alterar carregar_bairros vamos buscar os bairros usando a informação do estado e da cidade

SELECT * FROM bairros WHERE id_cidade = '{$id_da_cidade}' AND id_estado = '{$id_do_estado}'
-- lebrando que a coluna "id_estado" é a coluna nova que identifica o estado

 

Bom, a estrutura HTML já deu para perceber como deve ser feita não é?

 

Uma questão boa de se abordar aqui é:

Se a pessoa carregar a query de bairros e não retornar nenhum valor é porque não tem bairro algum cadastrado para aquela cidade.

Então seria interessante definir a estrutura de um input text para que ela possa manualmente escrever seu bairro.

O mesmo valeria em criar um option no seletor caso haja resultado, mas não o bairro que ela procura.

Ao selecionar essa opção uma caixa de texto é inserida no html para ela manualmente escrever o bairro.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By rvamecca
      Eu tenho um servidor que roda os PHP da versão 5.6 até a 8.0 com vários sites. Utilizo a versão FPM só que pesquisei na internet inteira e não consegui fazer rodar os arquivos customizados php.ini/.user.ini nos diretórios dos domínios. Chequei via phpinfo() e não carrega o arquivo customizado de configuração.
       
      Alguém pode me dar um help?
       
      Servidor Ubuntu 18.04 com Apache e as versões PHP 5.6, 7.0, 7.2, 7.4, 8.0 em FPM
    • By violin101
      Caros amigos, saudações...
       
      Fiz várias pesquisa, mas não consegui entender como devo fazer corretamente.
       
      Tenho um Cadastro de Produto/Clientes/etc.
       
      Gostaria de após clicar no Button ADICIONAR ou GRAVAR, quero mostrar na tela a seguinte mensagem:
      msg:
      Aguarde Processando...
       
      obs.: em alguns sistema até parece uma MODAL, com barra de progresso.
       
      Para impedir que o usuário fica Clicando nos Buttons.
       
      Alguém poderia me auxiliar de como devo fazer isso ?
       
      Grato,
       
      Cesar
    • By alysson122010
      Galera estou começando a trabalhar com datatables porem tenho uma dificuldade pq tipo até 200 registros por pagina é aceitavel mas penso quando tiver 2000 registro carregar tudo numa pagina so da errado pq é muitos dados e pode travar tudo.
      Como posso fazer para listar com limite por pagina ou alguma maneira para poder colocar varios dados sem travar.
       
      estou usando assim:
      <script type="text/javascript">        $(document).ready(function() {             $('#example').DataTable({         "order": [[ 0, "desc" ]],         "language": {             "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"         }     });         } );        </script> <table id="example" class="table table-striped table-bordered" style="width:100%">         <thead>             <tr>                 <th>Name</th>                 <th>Position</th>                 <th>Office</th>                 <th>Age</th>                 <th>Start date</th>                 <th>Salary</th>             </tr>         </thead>         <tbody>             <tr>                 <td>Tiger Nixon</td>                 <td>System Architect</td>                 <td>Edinburgh</td>                 <td>61</td>                 <td>2011/04/25</td>                 <td>$320,800</td>             </tr>             <tr>                 <td>Garrett Winters</td>                 <td>Accountant</td>                 <td>Tokyo</td>                 <td>63</td>                 <td>2011/07/25</td>                 <td>$170,750</td>             </tr>             <tr>                 <td>Ashton Cox</td>                 <td>Junior Technical Author</td>                 <td>San Francisco</td>                 <td>66</td>                 <td>2009/01/12</td>                 <td>$86,000</td>             </tr>             <tr>                 <td>Cedric Kelly</td>                 <td>Senior Javascript Developer</td>                 <td>Edinburgh</td>                 <td>22</td>                 <td>2012/03/29</td>                 <td>$433,060</td>             </tr>             <tr>                 <td>Airi Satou</td>                 <td>Accountant</td>                 <td>Tokyo</td>                 <td>33</td>                 <td>2008/11/28</td>                 <td>$162,700</td>             </tr>             <tr>                 <td>Brielle Williamson</td>                 <td>Integration Specialist</td>                 <td>New York</td>                 <td>61</td>                 <td>2012/12/02</td>                 <td>$372,000</td>             </tr>             <tr>                 <td>Herrod Chandler</td>                 <td>Sales Assistant</td>                 <td>San Francisco</td>                 <td>59</td>                 <td>2012/08/06</td>                 <td>$137,500</td>             </tr>             <tr>                 <td>Rhona Davidson</td>                 <td>Integration Specialist</td>                 <td>Tokyo</td>                 <td>55</td>                 <td>2010/10/14</td>                 <td>$327,900</td>             </tr>             <tr>                 <td>Colleen Hurst</td>                 <td>Javascript Developer</td>                 <td>San Francisco</td>                 <td>39</td>                 <td>2009/09/15</td>                 <td>$205,500</td>             </tr>         </tbody>         <tfoot>             <tr>                 <th>Name</th>                 <th>Position</th>                 <th>Office</th>                 <th>Age</th>                 <th>Start date</th>                 <th>Salary</th>             </tr>         </tfoot>     </table> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>  
    • By AlexandrePrezzi
      Seguinte
      Tenho uma página chamada  "teste.php" nessa página tem um formulário com vários campos que o usuário usa para fazer um filtro dos campos a serem pesquisado...
       
      Ao clicar no Pesquisar (submit) ... o action da página faz a seguinte ação
       
      script type="text/javascript"> $(function($){ $('#meuFormulario').submit(function(){ var dados = jQuery(this).serialize(); jQuery.ajax({ type: "POST", url: "src/controller/request_teste.php", data: dados, cache: false, beforeSend: function() { $('#resultPesq').html("Carregando..."); }, success: function(e) { //window.alert(e); $('#resultPesq').html(e); }, error: function() { $('#resultPesq').html('Não foi encontrado dados!'); } }); return false; }); }); </script> O arquivo "request_teste.php", é quem recebe os dados do POST e faz o  tratamento desses dados....
       
      Ao final desse arquivo tem um  require_once 'result_teste.php' que vem a ser o arquivo onde irá mostrar o resultado da pesquisa.
       
      Nesse arquivo eu fiz uma páginação ao final do resultado.
       
      Entao primeiramente o link que estou acessando é 
       
      principal.php?link=teste.php  (abre a pagina com o formulário)
      ao clicar em pesquisar o link nao muda
       
      quando clico em página 2, é feito um refresh e a url fica principal.php?link=teste.php&pag=2
       
      O que acontece é que como a página faz um refresh eu perco todos dados do meu POST e tambem preciso clicar no botão pesquisar pra carregar os dado da página 2.
       
      Alguem sabe como ajustar isso ?

      Se precisarem de mais informações me avisem
       
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.