PHP Preencher combo box em três níveis

Camilavip · 17 de setembro de 2020

Oi, queria conseguir preencher um cadastro, e preciso de um combo box de 3 níveis, sendo estado, cidade e bairro.

Em estados no mysql 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');

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

Queria saber como fazer esse select e quando ou trouxer um estado ele já puxa as cidades contidos nele, e ao escolher a cidade vir 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

ArThDsL · 19 de setembro de 2020

Olá @Camilavip,

Você terá de utilizar requests a cada select para puxar o conteúdo contido em cada banco de dados dependendo da opção do cliente na selecbox anterior, tem como fazer isso utilizando jQuery, Ajax ou até mesmo XHR, o retorno completará os campos do próximo select e assim por diante.

Grande abraço!

Camilavip · 21 de setembro de 2020

Em 19/09/2020 às 20:36, ArThDsL disse:

Olá @Camilavip,

Você terá de utilizar requests a cada select para puxar o conteúdo contido em cada banco de dados dependendo da opção do cliente na selecbox anterior, tem como fazer isso utilizando jQuery, Ajax ou até mesmo XHR, o retorno completará os campos do próximo select e assim por diante.

Grande abraço!

Encontrei um la fora, 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

Não sei onde estou errando

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

Arquivo ajaxdata.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>';
	}

}


?>

o banco de dados

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

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

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

?>