Preencher combo box em três níveis

Camilavip · Setembro 18, 2020

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');

Omar~ · Setembro 18, 2020

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....

Camilavip · Setembro 18, 2020

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

Omar~ · Setembro 18, 2020

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.

Camilavip · Setembro 18, 2020

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.

Jack Oliveira · Setembro 18, 2020

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

washalbano · Setembro 21, 2020

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.

Camilavip · Setembro 22, 2020

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

?>

Omar~ · Setembro 23, 2020

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.

Preencher combo box em três níveis

Recommended Posts

Camilavip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Camilavip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Camilavip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

washalbano 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Camilavip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Abrir url na mesma janela

Sistema de Login

Conteúdo Similar

Fóruns

Tempo Real

Informação importante