Seletor de estado/cidade/bairro no mesmo dropdown select

[AndersonWS 10]

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.

 

 

[AndersonWS 10]

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>

 

[AndersonWS 10]

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>