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:

http://jquery.com/

plugin selectboxes

jquery.js é o framework e o plugin jquery.selectboxes.js é o manipulador de selects

EXEMPLO ONLINE

DOWNLOAD:

combobox.zip

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: