Jquery – Javascript – Combos carregarem dinamicamente

Vejo que uma das coisas mais comum em formulários são as combos que quando o usuário escolhe uma opção da primeira as demais carregam automaticamente suas opções com os valores do banco de dados, muito utilizadas em combos de país / cidade / estado.

Abaixo segue um exemplo feito com jquery, para tornar mais fácil o entendimento de como funciona não fiz com uso de banco de dados e sim com um array feito manualmente, mas batendo os olhos já da pra entender facilmente. Caso tenha alguma duvida comente o post ou me envie um e-mail que ajudo ok?

[EXEMPLO ONLINE]
[DOWNLOAD]

[Javascript]

		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
		<script>
	               $(document).ready(function(){
		               $('#combo1').change(function(){
			               $('#combo2').html('<option>Carregando...</option>');
		                       $.post('ajax.php',
		                               	{ id : $(this).val() },
		                               	function(resposta){
			                       		$('#combo2').html(resposta);
						}
					);
		               });
	               });
		</script>

[HTML]

<body>
		<form name="formulario" method="post">
			<p>
				<span>Escolha(combo1):</span>
				<select name="combo1" id="combo1">
					<option value="0">-- Selecione --</option>
					<option value="1">Carro</option>
					<option value="2">Moto</option>
					<option value="3">Casa</option>
				</select>
			</p>
			<p>
				<span>Modelos(combo2):</span>
				<select name="combo2" id="combo2">
					<option value="0">-- Selecione algum item da combo1--</option>
				</select>
			</p>
		</form>
	</body>

[PHP]

<?php
	$opcoes = array();
	$opcoes[1] = array(
		'corsa',
		'gol',
		'fusca',
		'passat'
	);
	$opcoes[2] = array(
		'CBR',
		'R1',
		'GSX',
		'CG300R'
	);
	$opcoes[3] = array(
		'Praia',
		'Capital'
	);
?>
<option value="0">-- selecione --</option>
<?php
	foreach($opcoes as $chave => $valor){
		foreach($valor as $key => $value){
			if($chave == $_POST['id']){
				?>
				<option value="<?=$key+1?>"><?=$value?></option>
				<?php
			}
		}
	}
?>
Compartilhar:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • RSS
  • Twitter
  • Add to favorites
  • Diigo
  • email
  • LinkedIn
  • Live
  • Mixx
  • MySpace
  • PDF
  • Sphinn
  • StumbleUpon
  • Yahoo! Bookmarks

Tags: , ,

3 Responses to “Jquery – Javascript – Combos carregarem dinamicamente”

  1. Rafael Dias says:

    Estou criando um sistema de biblioteca na qual eu tenho um cadastro de livros, nele possui dois combos um pra selecionar a área e o outro para selecionar um assunto, ambos buscam os valores no banco de dados que eu criei, então eu pensei e muda seu código mas não obtive nenhum resultado positivo da pra mim ajudar pra fazer um select do banco de dados????
    Desde de já agradeço a coloboração!!!

  2. posso, preciso de saber como esta sua base de dados, envie em meu e-mail o dump. fernando.binasco@gmail.com

  3. [...] e visite este link para ver como montar combobox de cidades e [...]

Leave a Reply