Populando combobox com Jquery

[Fabyo 66]

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 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:

[hargon 64]

Muito bom Fabyo. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Deives 0]

Realmente o código ficou curto e de fácil entendimento, valeu Fabyo !

[Brayan Rastelli 2]

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

[Fabyo 66]

qual navegador esta usando?, testou no firefox?

[Brayan Rastelli 2]

Sim, FF, Opera e konqueror.. nenhum deu =T

[William Bruno 1501]

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://jquery.com/

plugin selectboxes

 

http://forum.imasters.com.br/index.php?/topic/365795-combos-dependentes-ajax-jquery/

[Evandro Junior 0]

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.

[Jefferson Saavedra 0]

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.

[William Bruno 1501]

Esse meu vem do banco:

http://forum.imasters.com.br/index.php?/topic/365795-combos-dependentes-ajax-jquery/

 

[Amanda_Flor 0]

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'];

....

[Fabyo 66]

é que no exemplo usei numeros basta mudar para o UF corretos

 

abre o acoes.php e veja como estao os arrays $cidades só mudar

[Amanda_Flor 0]

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é')
			);	
		}

[rumao 1]

Boa tarde a todos, sei que este post é muito antigo mas alguém teria um exemplo como este com dados vindo do banco?

[Henrique Zanini 0]

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);
		}
	}

e o resultado foi:

[{"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.