Jump to content
AndersonWS

Seletor de estado/cidade/bairro no mesmo dropdown select

Recommended Posts

Neste site aqui: https://kithomepage.com/estado-cidade-municipio/ tem um dropdown de Estados, cidades, municípios só que ao selecionar estado, abre um novo seletor de cidades e ao selecionar a cidade abre um novo seletor de bairros.

Quero saber se seria possível / viável, abrir no mesmo seletor dropdown select.
Ao invés de abrir 3 que o Estado, por exemplo, se "transforma-se" em bairros no option ficaria assim:

<select name="endereco" id="estados">
  <option>São Paulo</option>
  <option>Rio de Janeiro</option>
</select>

Após selecionar o estado o mesmo seletor ficaria assim:

<select name="endereco" id="municipio">
  <option>São Paulo > Campinas</option>
  <option>São Paulo > Guarulhos</option>
</select>

E ao selecionar a cidade ficaria assim:

<select name="endereco" id="bairros">
  <option>São Paulo > Campinas > Parque Prado</option>
  <option>São Paulo > Campinas > Taquaral</option>
</select>

Então enviaria o valor do endereço estado/cidade/bairro em um só dropdown select.

Podem me ajudar com dicas e falando se é ou não possível e qual o caminho (o que eu deveria procurar) pra fazer isso.

 

Grato.

 

 

Share this post


Link to post
Share on other sites

Achei este script bem simples e modifiquei mas está bem bruto ainda, pra começar teria que ser mais dinâmico e também ainda falta a seleção dos bairros. Segue o que consegui até agora:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">
  #est1_municipios,#est2_municipios {
    display: none;
  }
  select, option{
	height:35px;width:200px;
  }
</style>
<center>
    <select name='endereco' onchange="mostraEsderecos(this.value)">
        <optgroup label="Estados" id="estados">
			<option>Selecione um Estado</option>
			<option value='estado_1'>Estado 1</option>
			<option value='estado_2'>Estado 2</option>
		</optgroup>
		<optgroup label="Cidades" id="est1_municipios">
			<option>Selecione uma Cidade</option>
			<option value='est1_municipio_1'>Estado 1 >> Municipio 1</option>
			<option value='est1_municipio_2'>Estado 1 >> Municipio 2</option>
		</optgroup>
		<optgroup label="Cidades" id="est2_municipios">
			<option>Selecione uma Cidade</option>
			<option value='est2_municipio_1'>Estado 2 >> Municipio 1</option>
			<option value='est2_municipio_2'>Estado 2 >> Municipio 2</option>
		</optgroup>
    </select>
</center>
<script>
function mostraEsderecos(valor) {
  if (valor === "estado_1") {
    document.getElementById("estados").style.display = "none";
    document.getElementById("est1_municipios").style.display = "block";
    document.getElementById("est1_municipio_1").disabled = true;
    document.getElementById("est1_municipio_2").disabled = true;
  } else {
    document.getElementById("estados").style.display = "block";
    document.getElementById("est1_municipios_1").style.display = "none";
    document.getElementById("est1_municipio_1").disabled = false;
    document.getElementById("est1_municipio_2").disabled = false;
  }
  if (valor === "estado_2") {
    document.getElementById("estados").style.display = "none";
    document.getElementById("est2_municipios").style.display = "block";
    document.getElementById("est2_municipio_1").disabled = true;
    document.getElementById("est2_municipio_2").disabled = true;
  } else {
    document.getElementById("estados").style.display = "block";
    document.getElementById("est2_municipios_1").style.display = "none";
    document.getElementById("est2_municipio_1").disabled = false;
    document.getElementById("est2_municipio_2").disabled = false;
  }
}
</script>



 

Share this post


Link to post
Share on other sites

Consegui fazer mais  alguns melhoramentos mas a partir daqui preciso de ajuda pra tornar mais dinâmico.
Reparei que é basicamente javascript então se algum moderador achar melhor pode mover o tópico.
Segue o script ajustado:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">
  #est1_municipios,#est2_municipios {
    display: none;
  }
  select, option{
	height:35px;width:200px;
  }
</style>
<center>
    <select name='endereco' id="endereco" onchange="mostraEsderecos(this.value)">
        <optgroup label="Estados" id="estados">
			<option>Selecione um Estado</option>
			<option value='estado_1'>Estado 1</option>
			<option value='estado_2'>Estado 2</option>
		</optgroup>
		<optgroup label="Cidades" id="est1_municipios">
			<option>Selecione uma Cidade</option>
			<option value='est1_municipio_1'>Estado 1 >> Municipio 1</option>
			<option value='est1_municipio_2'>Estado 1 >> Municipio 2</option>
		</optgroup>
		<optgroup label="Cidades" id="est2_municipios">
			<option>Selecione uma Cidade</option>
			<option value='est2_municipio_1'>Estado 2 >> Municipio 1</option>
			<option value='est2_municipio_2'>Estado 2 >> Municipio 2</option>
		</optgroup>
    </select>
	<input type="button" value="limpar select" id="limpar">
</center>

<script>
function mostraEsderecos(valor) {
  if ((valor === "estado_1")||(valor === "estado_2")) {
    document.getElementById("estados").style.display = "none";
	if (valor === "estado_1") {
		document.getElementById("est1_municipios").style.display = "block";
		document.getElementById("est2_municipios").style.display = "none";
		document.getElementById("est1_municipio_1").disabled = true;
		document.getElementById("est1_municipio_2").disabled = true;
		document.getElementById("estados").style.display = "none";
	} else if (valor === "estado_2") {
		document.getElementById("est1_municipios").style.display = "none";
		document.getElementById("est2_municipios").style.display = "block";
		document.getElementById("est2_municipio_1").disabled = false;
		document.getElementById("est2_municipio_2").disabled = false;
		document.getElementById("estados").style.display = "none";
	}
  } else {
  }
}
jQuery(document).ready(function(){
  jQuery('#limpar').click(function(){
	document.getElementById("estados").style.display = "block";
	document.getElementById("est1_municipios").style.display = "none";
	document.getElementById("est2_municipios").style.display = "none";
    jQuery('#endereco').prop('selectedIndex',0);
  })
});
</script>

 

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 babylon
      Ola amigos,
       
      Estava querendo criar algo para meu site, um botao igual do site abaixo para calcular formas de pagamento "ver formas de pagamento":
       
      https://www.chipart.com.br/pc-gamer-level-one-black-amd-3400g
       
      Segue imagem em anexo.
       
      Alguem poderia me ajudar se tem algum script algo pronto ou que ajude para abrir pop up modal?
       
      Obrigado a todos.
       
       

    • By srs1999_
      Tópico
       
      Site em Código
      Sobre desenvolver sites sem o wordpress que ja tá tudo ali feito que seja um site dinâmico ou seja com banco de dados , APIs de pagamento, Painel para o usuário ,  além de todas  as funções que tem no wordpress e você teria propriedade pra explicar sobre detalhes mais técnicos da produção onde no wordpress só quem entende de progrqmação explicaria algum detalhe técnico 
      Então usando basicamente : 
      FRONT END 
      HTML 
       CSS 
      JAVASCRIPT 
      ALGUMA DE BACKEND COMO PHP E BANCO DE DADOS
      Pode se criar sites/sistemas tão bons ou melhores que no wordpress
       
      Fato : o proprio wordpress é feito em php e ate o proprio facebook tbm em php
      Fato 2 :  cerca de 70% dos sites são feitos em Wordpress
       
      Acho esse lance de procurar o caminho mais fácil limita muito a pessoa por exemplo é facil editar imagens no paint bem intuitivo , agora para editar no photoshop com muitas outras possibilidades  acaba sendo importante ir explorando essa elaboração mais difícil  com um mesmo objetivo. No caso do exemplo ( editar imagens )  
       
      Reflexão:
      Vale a pena se dedicar a trabalhar com a ferramenta Wordpress apenas por ser um meio rápido de ganhar dinheiro ?
      Ou trabalhar sem wordpress  usando tudo que exigido pra criar coisas originais mais que não seria tão rápido a produção. Mas creio que além dos sites feitos também geraria a possibildade de vender o sistema web criado para o cliente personalizar .
       
      Você Desenvolveria de que forma :
       Wordpress apenas ?
       
      Conhecer programação pra trabalhar 
      com  Wordpress ?
       
      Produzir tudo só com programação totalmente dinâmico sem  Wordpress?
    • By violin101
      Caros amigos
       
      saudações...
       
      Peço desculpa, se postei minha dúvida em local errado.
       
      Tenho um formulário onde valido todos os campos e após clicar no BUTTON para adicionar, tenho uma função que muda o TITLE e deixa desabilitado.
       
      O problema é o seguinte:
      - caso algum campo fica em branco, após validar o formulário e mudar o BUTTON, não consigo depois de preenchido HABILITAR novamente o button.
       
      Observação:
      1) após preencher o campo que ficou em branco, como faço para HABILITAR o button novamente e mudar o title do button ?
       
       
      na VIEW está assim:
      <form action="<?php echo current_url(); ?>" id="frmEstoque" method="post" onsubmit="this.btn_adc.disabled=true;" > <div class="card-body"> <div class="row"> <!---Todos os campos do Formulário---> </div> </div> <div class="card-footer" style="text-align:center;"> <input type="hidden" id="idCli" name="idCli" value="<?php echo $cliente->idClientes; ?>" /> <a href="<?php echo base_url() ?>admin/estoque" id="" class="btn btn-danger"><i class="fa fa-undo"></i> Voltar</a> &nbsp; <button type="submit" id="btn_adc" name="btn_adc" class="btn btn-primary">Adicionar</button> </div> </form>  
      na JavaScript está assim:
      <script> //Função para Mudar o VALUE do Button Adicionar Veículo document.getElementById("btn_adc").addEventListener("click",function(){ this.innerHTML = this.value++ || 'Aguarde...'; },false); </script> /* Observação: 1) como removo a função acima, após validar o formulário e esse encontrar algum campo vazio. 2) após preencher o campo que ficou em branco, HABILITAR o button novamente. */ <script type="text/javascript"> $(document).ready(function(){ //Função para Validar Formulário $('#frmEstoque').validate({ rules :{ etq_categcars:{ required: true}, etq_destaq:{ required: true}, etq_status:{ required: true} }, messages:{ etq_categcars :{ required: '<span style="color:#ff0000;">Campo Requerido</span>'}, etq_destaq :{ required: '<span style="color:#ff0000;">Campo Requerido</span>'}, etq_status :{ required: '<span style="color:#ff0000;">Campo Requerido</span>'} }, errorClass: "help-inline", errorElement: "span", highlight:function(element, errorClass, validClass) { $(element).parents('.form-group').addClass('error'); }, unhighlight: function(element, errorClass, validClass) { $(element).parents('.form-group').removeClass('error'); $(element).parents('.form-group').addClass('success'); } }); //Status dos Botões ADICIONAR - iniciar como desabilitado. document.getElementById("btn_adc").disabled = true; }); function statusButton(){ //valida conteudo do input if ($("input[name=etq_vlrcpr]").val() != 0 && $("input[name=etq_vlrvda]").val() != 0) { //habilita o botão document.getElementById("btn_adc").disabled = false; } else { //desabilita o botão se o conteúdo do input ficar em branco document.getElementById("btn_adc").disabled = true; } } </script>  
      Grato,
       
      Cesar
       
       
       
       
    • By mateus.andriollo
      Olá,
      Gostaria de saber se alguem pode me ajudar.
      Meu PHP esta na pasta public_html em um CPanel, quero saber se é possível armazenar em pasta fora da pasta  pública, por segurança mesmo...
      Faço isso em ASP, ai chamo a imagem por um fso, funciona mas queria saber se tem como no PHP.
×

Important Information

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