Javascript / PHP - Popular Select

Asked

Viewed 103 times

0

I’m using the code below to create options on SELECT LIST according to the choices made in the previous.

<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,the SELECT LIST CIDADES shows me only the cities of that state, even there is working perfectly. I want to extend this proesso to the neighborhoods, IE, after selecting the CIDADE, the SELECT LIST BAIRROS show only neighborhoods of that city. With this code I am not getting, if you can help me thank.

Thank you!

  • Does the controller send all the data when the page opens? Wouldn’t it be a waste of request? I would choose to create a method and return the information you want, when you need it.

  • https://www.youtube.com/watch?v=caDatFefDP4&t=4s

  • Just follow this logic https://github.com/RafaelAugustS/PopulandoSelectsAjax

  • Rafael, thank you for the answer! In my case, I’m using Codeigniter 3, as I would in Funcoes.js, because the functions call a URL.... Thank you!

  • My question now is how to deploy the example using Codeigniter

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.