Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola pessoal
estou de volta com mais um pequeno exemplo para ajudar nossa comunidade.
nesse exemplo voce irá aprender como popular um combobox (<select>) com ajax usando jquery de forma muito facil e pratica, ou seja iremos preencher os options de um select com dados vindos do banco de dados de forma dinamica
e outro recurso muito interessante que vou mostrar tambem é como criar selects alinhados ou melhor dizendo
aquele select que depende de outro para ser carregado, por exemplo escolhendo um estado o proximo combobox ira ter as cidades daquele estado escolhido.
o motivo que me levou a criar esse topico, foi o numero constante de duvidas referente a esses assunto
e fui pesquisar na net para saber como estamos de tutoriais nesse sentido, e percebi que apesar de ter bastante tutoriais explicando como fazer isso, a maioria esta muito confusa com codigos gigantescos, e mesmo o pessoal usando jquery nao souberam aproveitar o maximo que esse framework pode oferecer, o pessoal usa jquery mas acaba fazendo um monte de gambiarras no meio para chegar ao objetivo.
vou mostrar como é simples usar o jquery e com poucas linhas fazer o que precisa ser feito.
exemplo funcionando:
* Internet Explore
* Firefox
* Google Chrome
vamos ao que interessa:
esse exemplo usa:
jquery.js é o framework e o plugin jquery.selectboxes.js é o manipulador de selects
DOWNLOAD:
OBS: deixei funcionando só para demostração, com os estados São Paulo e Rio de Janeiro
e coloquei só umas 5 cidades de exemplo.
usei php puro para gerar o retorno json, mas nada impede de usar um banco de dados no lugar, e se quiser usar esse exemplo para select de estados e cidades procure na net que existe banco de dados completos com estados e suas cidades.
Apesar de eu ter usado poucas linhas e usei todos os recursos do jquery, isso nao impede do sistema ser melhorado ainda mais, como falei criei esse exemplo apenas para ajudar a comunidade e sanar as duvidas a esse respeito.
agora vou explicar o que eu fiz nesse exemplo:
index.js:
//quem meche com jquery ja sabe para que serve, se não souber procure sobre tutoriais expecificos para jquery.
$(function(){
//adiciono um <option value="BR">Brasil</option> ao <select id="paises">$('#paises').change(function(){
//aqui só executo se o option for diferente do 'Selecione'
if($('#paises').selectedTexts() != 'Selecione'){
//aqui removo todos <option>, necessario para evitar ficar option quando seleciona algum estado que nao tem cidade
$('#estados').removeOption(/./);
//aqui via ajax com metodo GET chamo a pagina acoes.php passo o parametros id e acao e recebo o resultado em json
$('#estados').ajaxAddOption('acoes.php', {id: $(this).val(), acao: 'lerEstados'}, false);
}
});
$('#estados').change(function(){
if($('#estados').selectedTexts() != 'Selecione'){
$('#cidades').removeOption(/./);
$('#cidades').ajaxAddOption('acoes.php', {id: $(this).val(), acao: 'lerCidades'}, false);
}
});
});
viu bem simples ne?, apesar de simples qualquer duvida voce tbm pode entrar no site do plugin [selectboxes](http://www.texotela.co.uk/code/jquery/select/) que la tem mais explicações.outro detalhe importante que voces vao perceber é que não iremos ter problemas com acentuação
testem o exemplo online, qualquer duvida só postar aqui.
valeu pessoal
e boas festas :natal_biggrin:
Realmente o código ficou curto e de fácil entendimento, valeu Fabyo !
falae fabyo bls ?
parabens ae pelo script ^^
só q seguinte.. aqui no linux nao ta atualizando os estados qndo mudo o país ..
instalei os pacotes separados e tal.. (php,mysql,apache)
ja no win funfa normal.. tem alguma ideia do pq ?
valww
qual navegador esta usando?, testou no firefox?
Sim, FF, Opera e konqueror.. nenhum deu =T
Muito bacana o script mesmo Fabyo..
>
percebi que apesar de ter bastante tutoriais explicando como fazer isso, a maioria esta muito confusa com codigos gigantescos, e mesmo o pessoal usando jquery nao souberam aproveitar o maximo que esse framework pode oferecer, o pessoal usa jquery mas acaba fazendo um monte de gambiarras no meio para chegar ao objetivo.
Acredito que você tenha visto, mas deixo aqui o link de um que fiz, sem o uso de plugins adicionais:Se você puder analisar o script, e melhora-lo, acredito que podemos evitar o carregamento de mais um JS..
>
esse exemplo usa:
http://forum.imasters.com.br/index.php?/topic/365795-combos-dependentes-ajax-jquery/
Cara, é extremamente útil ter em um site ou sistema web pelo menos uns dois comoboxes dinâmicos... Este tutorial simples, mas incrível vale a pena, e já estou aproveitando as dicas no sistema que estou desenvolvendo para o meu TCC, vai ser muito útil para o módulo de inventário de equipamentos. Muito obrigado.
Poxa amigo gostei muito, mas coloca um exemplo aí caso fosse buscar de um banco de dados. Obrigado pela atenção e desculpe o incômodo.
Esse meu vem do banco:
>
http://forum.imasters.com.br/index.php?/topic/365795-combos-dependentes-ajax-jquery/
Montei e deu tudo certo, mas se eu implemento isso em um formulário, quando faço o envio dos dados
recebo os números ao invés do conteúdo selecionado.
Por exemplo, recebo o e-mail com esse conteúdo:
País: Brasil
Estado: 1
Cidade: 3
o php pra enviar está assim:
$pais = $_POST['pais'];
$estado = $_POST['estado'];
$cidade = $_POST['cidade'];
....é que no exemplo usei numeros basta mudar para o UF corretos
abre o acoes.php e veja como estao os arrays $cidades só mudar
Justamente isso que olhei Fabyo
if($acao == 'lerEstados'){
if($id == 'BR'){
$estados = array(
'AC' => 'Acre',
'AL' => 'Alagoas',
'AP' => utf8_encode('Amapá'),
'AM' => 'Amazonas',
'BA' => 'Bahia',
'CE' => utf8_encode('Ceará'),
'DF' => 'Distrito Federal',
'ES' => utf8_encode('Espírito Santo'),
'GO' => utf8_encode('Goiás'),
'MA' => utf8_encode('Maranhão'),
'MT' => 'Mato Grosso',
'MS' => 'Mato Grosso do Sul',
'MG' => 'Minas Gerais',
'PA' => utf8_encode('Pará'),
'PB' => utf8_encode('Paraíba'),
'PR' => utf8_encode('Paraná'),
'PE' => 'Pernambuco',
'PI' => utf8_encode('Piauí'),
'RJ' => utf8_encode('Rio de Janeiro'),
'RN' => 'Rio Grande do Norte',
'RS' => 'Rio Grande do Sul',
'RO' => utf8_encode('Rondônia'),
'RR' => 'Roraima',
'SC' => 'Santa Catarina',
'SP' => utf8_encode('São Paulo'),
'SE' => 'Sergipe',
'TO' => 'Tocantins'
);
die(json_encode($estados));
}
}
if($acao == 'lerCidades'){
$cidades = array();
if($id == 'RJ'){
$cidades = array(
'1' => 'Angra dos Reis',
'2' => utf8_encode('Aperibé'),
'3' => 'Araruama',
'4' => 'Areal',
'5' => utf8_encode('Armação dos Búzios')
);
}
if($id == 'SP'){
$cidades = array(
'1' => 'Adamantina',
'2' => 'Adolfo',
'3' => utf8_encode('Aguaí'),
'4' => utf8_encode('Águas da Prata')
);
}
die(json_encode($cidades));
}Não posso mudar a var do if, se não não funfa rs
Por exemplo:
if($id == 'RJ'){
$cidades = array(
'Rio de Janeiro' => 'Angra dos Reis',
'Niterói' => utf8_encode('Aperibé')
);
}Boa tarde a todos, sei que este post é muito antigo mas alguém teria um exemplo como este com dados vindo do banco?
Também queria saber como faz pra fazer vir os resultados do banco :/
Esse meu vem do banco:
Willian, parabéns pelos ensinamentos. Já acompanho seu site a algum tempo e sempre tem muita coisa boa.
Minha dúvida em relação ao código fornecido pelo Fabyo, é na parte do array. Como fazer ele vir do banco.
Tentei da seguinte forma:
$arr = array();
while($r = mysql_fetch_array($sql)) {
$id = $r['id'];
$bairro = $r['bairro'];
$arr[] = array($id => $bairro);
}
}[{"6":"D.E.R"},{"2":"Centro"}]
Porém, no select apareceu:
<option value="0">[object Object]</option>
<option value="1">[object Object]</option>Obrigado e parabéns mais uma vez.
Muito bom Fabyo. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif