Populando combobox com Jquery
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').addOption('BR', 'Brasil', false);//false significa que NAO será um option selecionado selected="selected"
//aqui executo quando é selecionado um option
$('#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:
Discussão (14)
Carregando comentários...