0

Estou usando o código abaixo para criar opções no SELECT LIST de acordo com as escolhas feitas nos anteriores.

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

Quando seleciono UF,o SELECT LIST CIDADES me mostra somente as cidades daquele estado, até ai está funcionando perfeitamente. Quero estender este proesso até os bairros, ou seja, após selecionar a CIDADE, o SELECT LIST BAIRROS mostre apenas bairros daquela cidade. Com este código não estou conseguindo, se puderem me ajudar agradeço.

Obrigado!

5
  • O controller envia todos os dados quando a página for abrir? Não seria um desperdício de requisição? Eu optaria por criar um método e retornar a informação que você quer, quando precisar. Commented 17/11/2017 às 11:50
  • youtube.com/watch?v=caDatFefDP4&t=4s Commented 17/11/2017 às 11:55
  • Basta seguir essa logica github.com/RafaelAugustoS/PopulandoSelectsAjax Commented 17/11/2017 às 11:55
  • Rafael, agradeço pela resposta! No meu caso, estou usando Codeigniter 3, como faria no Funcoes.js, pois as funções chamam uma URL.... Obrigado! Commented 17/11/2017 às 16:10
  • Minha dúvida agora é como implantar o exemplo usando Codeigniter Commented 17/11/2017 às 18:11

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .