Ir para conteúdo

POWERED BY:

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

 

Compartilhar este post


Link para o post
Compartilhar em outros 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....

Compartilhar este post


Link para o post
Compartilhar em outros 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

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.
 

Compartilhar este post


Link para o post
Compartilhar em outros 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);
}

?>

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Carcleo
      Tenho uma abela de usuarios e uma tabela de administradores e clientes.
      Gostaria de uma ajuda para implementar um cadastro
       
      users -> name, login, passord (pronta) admins -> user_id, registratiom, etc.. client -> user_id, registratiom, etc...
      Queria ajuda para extender de user as classes Admin e Client
      Olhem como estáAdmin
      <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Admin extends User {     use HasFactory;            protected $fillable = [         'name',         'email',         'password',         'registration'     ];      private string $registration;     public function create(         string $name,          string $email,          string $password,         string $registration     )     {         //parent::create(['name'=>$name, 'email'=>$email, 'password'=>$password]);         parent::$name = $name;         parent::$email = $email;         parent::$password = $password;         $this->registration = $registration;     } } User
      <?php namespace App\Models; // use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Illuminate\Database\Eloquent\Relations\BelongsToMany; class User extends Authenticatable {     /** @use HasFactory<\Database\Factories\UserFactory> */     use HasFactory, Notifiable;     static string $name;     static string $email;     static string $password;     /**      * The attributes that are mass assignable.      *      * @var list<string>      */     protected $fillable = [         'name',         'email',         'password',     ];          /**      * The attributes that should be hidden for serialization.      *      * @var list<string>      */     protected $hidden = [         'remember_token',     ];     /**      * Get the attributes that should be cast.      *      * @return array<string, string>      */     protected function casts(): array     {         return [             'email_verified_at' => 'datetime',             'password' => 'hashed',         ];     }          public function roles() : BelongsToMany {         return $this->belongsToMany(Role::class);     }       public function hasHole(Array $roleName): bool     {                 foreach ($this->roles as $role) {             if ($role->name === $roleName) {                 return true;             }         }         return false;     }         public function hasHoles(Array $rolesName): bool     {                 foreach ($this->roles as $role) {             foreach ($rolesName as $rolee) {             if ($role->name === $rolee) {                 return true;             }          }         }         return false;     }         public function hasAbility(string $ability): bool     {         foreach ($this->roles as $role) {             if ($role->abilities->contains('name', $ability)) {                 return true;             }         }         return false;     }     } Como gravar um Admin na tabela admins sendo que ele é um User por extensão?
      Tentei assim mas é claro que está errado...
      public function store(Request $request, Admin $adminModel) {         $dados = $request->validate([             "name" => "required",             "email" => "required|email",             "password" => "required",             "registration" => "required"         ]);         $dados["password"] =  Hash::make($dados["password"]);                  $admin = Admin::where("registration",  $dados["registration"])->first();                  if ($admin)              return                    redirect()->route("admin.new")                             ->withErrors([                                 'fail' => 'Administrador já cadastrados<br>, favor verificar!'                   ]);                            $newAdmin = $adminModel->create(                                    $dados['name'],                                    $dados['email'],                                    $dados['password'],                                    $dados['registration']                                 );         dd($newAdmin);         $adminModel->save();         //$adminModel::create($admin);                  return redirect()->route("admin.new")->with("success",'Cadastrado com sucesso');     }  
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de tirar uma dúvida com os amigos, referente a PDV.
       
      Estou escrevendo um Sistema com Ponto de Vendas, a minha dúvida é o seguinte, referente ao procedimento mais correto.

      Conforme o caixa vai efetuando a venda, o Sistema de PDV já realiza:
      a baixa direto dos produtos no estoque
      ou
      somente após concretizar a venda o sistema baixa os produtos do estoque ?
       
      Grato,
       
      Cesar
       
    • Por violin101
      Caros amigos do grupo, saudações e um feliz 2025.
       
      Estou com uma pequena dúvida referente a Teclas de Atalho.

      Quando o Caps Lock está ativado o Comando da Tecla de Atalho não funciona.
      ou seja:
      se estiver para letra minúscula ====> funciona
      se estiver para letra maiúscula ====> não funciona
       
      Como consigo evitar essa falha, tanto para Letra Maiúscula quanto Minúscula ?

      o Código está assim:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'r' ) return;// Não é Ctrl+r, portanto interrompemos o script evt.preventDefault(); });  
      Grato,
       
      Cesar
    • Por ILR master
      Fala galera, tudo certo?
       
      Seguinte: No servidor A estou tentando fazer uma consulta com o servidor B, mas está dando erro.
      Estou usando o mesmo código de conexão do servidor B que funciona perfeitamente, mas no servidor A, dá erro.
      Segue código:
       
      $host = 'servidor B';
      $user = 'user';
      $pass = '********';
      $db   = 'banco';
       
      // conexão e seleção do banco de dados
      $conexao = mysqlI_connect($host, $user, $pass, $db);
      mysqlI_set_charset($conexao,"utf8");
      //print "Conexão rodando e OK!"; 
      //mysqlI_close($conexao);
       
      Alguém pode me ajudar?
    • Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.