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.
– Andre Mesquita
https://www.youtube.com/watch?v=caDatFefDP4&t=4s
– Rafael Augusto
Just follow this logic https://github.com/RafaelAugustS/PopulandoSelectsAjax
– Rafael Augusto
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!
– crishenrique1986
My question now is how to deploy the example using Codeigniter
– crishenrique1986