I'm using the code below to create options in SELECT LIST
according to the choices made in the previous ones.
<script type="text/javascript">
//Dados passados pelo controller
$ufs = <?=json_encode($ufs_item)?>;//Todos os estados
$cidades = <?=json_encode($cidades_item)?>;//Todas as cidades
$bairros = <?=json_encode($bairros_item)?>;//Todas as cidades
$clientUf = '';
$clientCidade = '';
$clientBairro = '';
//Manipulação do DOM
$(function(){
//Checa o valor de 'clientUf' e preenche 'cCidade' ao carregar
search_cidades($clientUf);
// Cria as OPTIONS de #cUf
$('<option>').val('').text('').appendTo('#cUf');
$.each($ufs, function(key,val){
//Checa o valor de 'clientUf'
if($clientUf === val.uf){ $selected = true;}
else {$selected = false; }
//Cria o combo com os dados de 'estados' checando 'clientUf'
$('<option>').val(val.uf).text(val.uf).attr('selected',$selected).appendTo('#cUf');
});
// Comportamento do SELECT ao mudar de uf
$('#cUf').change(function(){
search_cidades(this.value);
});
});
// Captura as cidades de cada UF
function search_cidades(uf){
$('#cCidade').find('option').remove();
$.each($cidades, function(key,val){
if(uf === val.uf){
if($clientCidade === val.cidade){ $selected = true;}
else {$selected = false; }
//Substitui as OPTIONS do 'cCidade'
$('<option>').val(val.codigo_cidade).text(val.cidade).attr('selected',$selected).appendTo('#cCidade');
}
});
// Comportamento do SELECT ao mudar de cidade
$('#cCidade').change(function(){
search_bairros(this.value);
});
}
// Captura os bairros de cada Cidade
function search_bairros(cidade){
alert(cidade);
$('#cBairro').find('option').remove();
$.each($bairros, function(key,val){
if(cidade === val.codigo_cidade){
if($clientBairro === val.bairro){ $selected = true;}
else {$selected = false; }
//Substitui as OPTIONS do 'cCidade'
$('<option>').val(val.bairro).text(val.bairro).attr('selected',$selected).appendTo('#cBairro');
}
});
}
When I select UF
, SELECT LIST CIDADES
shows me only the cities in that state, so far it's working perfectly. I want to extend this process to the neighborhoods, that is, after selecting CIDADE
, SELECT LIST BAIRROS
show only neighborhoods of that city. With this code I can not, if you can help me, thank you.
Thank you!