Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.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>
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: