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 Sapinn
      Resolvi atualizar meu xampp para a versão 7.4.14 e estou com um erro de Internal Server Error que fica em um projeto que estou usando htacess para fazer urls amigáveis o arquivo usados são:
      Arquivo externo:
       
      <IfModule mod_rewrite.c>
          RewriteEngine on
          RewriteRule ^$ public/ [L]
          RewriteRule (.*)public/$1 [L]
      </IfModule>
       
      Dentro da pasta public:
       
      <IfModule mod_rewrite.c>
          Options -Multiviews
          RewriteEngine On
          RewriteBase /unset_mvc/public
          RewriteCond %{REQUEST_FILENAME} !-d
          RewriteCond %{REQUEST_FILENAME} !-f
          RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]
      </IfModule>
       
      Dentro da pasta app:
      Options -Indexes
       
      Preciso de ajuda porquê não sei o que fazer, já tentei apagar algumas coisas no httpd.conf dentro do xampp mas não funcionou.
    • By violin101
      Caros amigo, saudações...

      por favor, me perdoa se postei na opção errada.
       
      estou com a seguinte dúvida.
       
      tenho o seguinte código no cadastro: 1234 0000 4320 9785
       
      como consigo mostrar /inibir os números no meio, para o usuário desta forma: 1234********9785
       
      Grato,
       
      Cesar
    • By Rodrigo5468
      Olá, boa tarde!
       
      Eu estava procurando na internet, mas não obtive nenhum resultado significativo.
      Eu preciso de um script em php que converte os links do youtube para o formato .mp4. Como que eu posso fazer isso? Alguma dica?
      Quero que quando o usuário informa o link do youtube no input e clica no botão de converter baixe o vídeo e faz a conversão para .mp4 e fornece para o usuário o link convertido para .mp4.
       
       
      Obrigado desde já.
    • By OSVALDO ARANTES JÚNIOR
      Boa tarde,  estou desenvolvendo uma consulta no php/mysql em diversas colunas. E gostaria de saber
      se existe um caracter especial para listar todos os dados, minha quere esta organizada da seguinte forma
       
      $query = sprintf("SELECT * FROM operacao  WHERE data_operacao BETWEEN '$data_inicial_rel' AND '$data_final_rel' AND estado_operacao = ' ' ORDER BY id_operacao ASC ;");
       
      quando declaro o valor do estado_operacao ele lista perfeitamente o valor, agora minha dúvida é se existe um 
      carater para listar todos os valores... para que eu use como value no opition do select, passar o valor TODOS pra a query
       
      desde já agradeço a atenção.
    • By k9studio
      Olá Meus amigos,
       
      Minha tabela a baixo quero atualizar a order mais da erro, algum pode dar um help
      como os dados são armazenados:
      namesystem setting   value   order (honda)    (name)   (Honda)   1 (honda)    (xtts)   (ok)      0    (honda)   (visible)  (on)      0   
      erro ao atualizar.
       
      UPDATE system SET order = '1' WHERE namesystem ='honda'
      Fatal error: Uncaught PDOException: SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'order = '1' WHERE WHERE namesystem ='honda'
      CREATE TABLE `system` (   `namesystem` text COLLATE utf8_unicode_ci NOT NULL,   `setting` text COLLATE utf8_unicode_ci NOT NULL,   `value` text COLLATE utf8_unicode_ci NOT NULL,   `order` int(1) NOT NULL,   KEY `namesystem_setting` (`namesystem`(32),`setting`(32)),   KEY `setting_value` (`setting`(32),`value`(32)) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
×

Important Information

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