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 Rizer
      Galera, estamos buscando um profissional para atuar como Desenvolvedor PHP Junior/Pleno na Rizer. Está interessado?
       
      Empresa: Rizer (www.rizer.com.br)
      Vaga: Desenvolvedor PHP Pleno
      Carga horária: 40h semanais (seg a --- / 9h-18h)
      Local de trabalho: Edf. Cosmopolitan, Paralela - Salvador/BA
       
      Buscamos um profissional que não tenha potencial somente para exercer com excelência a posição de Desenvolvedor PHP, mas também para - num futuro próximo - liderar times na sua área de expertise. Para tornar isso possível, iremos imergi-lo no mercado e no mundo de empresas de tecnologia e startups, apresentando ainda mais sobre o funcionamento de empresas como a nossa (não tão tradicionais assim) e sobre as metodologias que utilizamos para atingir nossos resultados.
       
      A Rizer cresce exponencialmente a cada dia e gostamos de fazer todos crescerem junto conosco. Por isso, além de uma excelente política de reconhecimento e promoção (algumas vezes meteórica) de funcionários, possuímos também um programa de Vesting para oferecer quotas da sociedade da empresa para membros do nosso time que se destacam.
       
      Pré-requisitos:
      Conhecimento sólido em PHP (2+ anos de experiência);
      Integração via APIs rest;
      Framework Laravel;
      Banco de dados relacional (mysql);
      Utilização de metodologias ágeis (Scrum);
      Git / gitflow.
      Phpunit;
      Boas práticas e design pattern;;
      CSS, HTML e JavaScript
       
      Interessados deverão preencher o seguinte formulário:
       
      http://bit.ly/rizer1
       
      e fazer o upload do currículo com nome “Desenvolvedor PHP Pleno - SEU NOME”
      Você se considera uma excelente pessoa e um ótimo profissional? Curtiu a vaga? Então vem trabalhar com a gente, vem!
    • By rafaelmoreira78
      Boa tarde!
      Estou querendo fazer um select a partir da seleção de um combobox. Nesse combobox o usuário escolhe o tipo de busca que ele quer. Se é por nome, por id, por data etc. E depois, exibe os dados nos campos. Porém, não estou conseguindo e não sei como resolver isso.
      public void consultar(){ String sql ="select * from tbcertificados where ?=?"; try{ pst=conexao.prepareStatement(sql); pst.setString(1,cbConsulta.getSelectedItem().toString()); pst.setString(2,txtBusca.getText()); rs=pst.executeQuery(); if (rs.next()){ lblID.setText(rs.getString(1)); txtNome.setText(rs.getString(2)); comboCursos.setSelectedItem(rs.getString(3)); txtData.setText(rs.getString(4)); txtCH.setText(rs.getString(5)); txtEmpresa.setText(rs.getString(6)); txtObs.setText(rs.getString(7)); }  
    • By danilo759
      Tenho uma tabelinha de programas para uma rádio... está da seguinte forma.

      titulo
      data (YYYY-MM-DD)
      hora (00:00:00)

      Minha consulta, mas não retorna o programa da hora corrente. O que eu fiz de errado?
      SELECT * FROM programas WHERE data = CURDATE() AND hora = CURTIME() LIMIT 1
×

Important Information

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