Home > Javascript, Jquery > Jquery – Javascript – Combos carregarem dinamicamente

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]
[code lang="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>
[/code]

[HTML]
[code lang="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>
[/code]

[PHP]
[code lang="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
}
}
}
?>
[/code]

Fernando Binasco Javascript, Jquery , ,

  1. Rafael Dias
    September 9th, 2009 at 01:45 | #1

    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. September 9th, 2009 at 03:36 | #2

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

  1. No trackbacks yet.