Concorra a três cursos on-line totalmente grátis:
1. Web Marketing
2. Técnicas de Vendas
3. Marketing Pessoal
Veja como criar aquele famoso combo dinâmico que carrega outro combo pelo Dreamweaver
Grau de Dificuldade: 7
Olá turma, espero que todos estejam curtindo bastante esse carnaval, ao passo que desejo muito juízo para vocês…
Hoje, vamos aprender a fazer aquele famoso Combo Dinâmico, em que o valor escolhido primeiro combo determina a composição do segundo:
Inicialmente, vamos criar a nossa tabela e populá-la com dados que servirão de teste para nosso exemplo. Clique aqui para baixar o comando sql que irá criar e popular as duas tabelas (estados) e (cidades) que serão utilizadas em nosso exemplo, cujo não é de minha autoria:
Feito isso, vamos abrir o Dreamweaver e clicar no Painel Database para criar a nossa conexão com o banco de dados MYSQL. Defina os valores conforme segue abaixo:

Em seguida, criaremos um recordset (conjunto de registros) com o auxílio do Painel Bindings (CTRL + F10). Caso tenha alguma dúvida nessa etapa, observe a figura abaixo:

Se preferir, clique no botão TEST para observar os registros que compõem a tabela produtos, conforme na figura abaixo:
O próximo passo é inserir a tag FORM (Menu Insert / Form / Form) que vai os nossos dois selects. Logo após, mude o NOME e ID do form para combo, conforme a figura abaixo:

Dentro da tag form, insira um List/Menu com o auxílio do Menu Inserir / Form / List Menu. Defina seu label como estados, conforme a figura abaixo:

Em seguida, clique no Select e mude seu NOME e ID para estados, conforme a figura abaixo:

No painel Properties, clique no botão Dynamic e configure o select para exibir os dados diretamente do banco. Note que estaremos passando o parâmetro UF como value e NOME como label (exibição), conforme a figura abaixo:

Vá para o modo Code, insira o parâmetro onChange="combo_dinamico();" para chamar a função javascript combo_dinamico após o usuário ter feito a escolha no primeiro select, conforme a figura abaixo:
Logo abaixo, desse form, insira o segundo combo, definindo seu NOME e ID como cidades, conforme a figura abaixo:

Vá ao modo Code, logo após a tag <body> e clique na linha no botão INCLUDE da Aba PHP, para que possamos inserir o arquivo javascript que vai chamar a função combo_dinamico, conforme a figura abaixo:

Pressione Enter, e insira um iframe, que servirá para armazenar os dois selects após o carregamento dos combos. Para configurar o iframe, observe a figura abaixo:

Salve o arquivo como combo1.php, cujo código-fonte segue abaixo:
<?php require_once('Connections/weblivre.php'); ?>
<?php
mysql_select_db($database_weblivre, $weblivre);
$query_rs_estados = "SELECT * FROM estados";
$rs_estados = mysql_query($query_rs_estados, $weblivre) or die(mysql_error());
$row_rs_estados = mysql_fetch_assoc($rs_estados);
$totalRows_rs_estados = mysql_num_rows($rs_estados);
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Combo Dinâmico</title>
</head>
<body><?php include("combo_dinamico.js"); ?>
<div style="DISPLAY: none; POSITION: absolute" align="left">
<IFRAME src name="meuIframe" id="meuIframe" width="400"
height="100" marginwidth="0" marginheight="0"></IFRAME>
</div>
<form method="post" name="combo" id="combo">
Estados:
<select name="estados" id="estados" onChange="combo_dinamico();">
<?php
do {
?>
<option value="<?php echo $row_rs_estados['uf']?>"><?php echo $row_rs_estados['nome']?></option>
<?php
} while ($row_rs_estados = mysql_fetch_assoc($rs_estados));
$rows = mysql_num_rows($rs_estados);
if($rows > 0) {
mysql_data_seek($rs_estados, 0);
$row_rs_estados = mysql_fetch_assoc($rs_estados);
}
?>
</select>
</label>
<p>
<label>Cidades:
<select name="cidades" id="cidades">
</select>
</label>
</p>
</form>
</body>
</html>
<?php
mysql_free_result($rs_estados);
?>
Cole o código abaixo e salve o arquivo como “combo_dinamico.js”:
<script language="JavaScript" type="text/JavaScript">
function combo_dinamico(){
Combo1 = document.combo.estados;
Combo2 = document.combo.cidades;
var url;
url = 'combo2.php?estado='+Combo1[Combo1.selectedIndex].value;
Combo2.options.length = 0;
addItem(Combo2,"Aguarde...o combo está sendo carregado","",false,Combo2.length)
meuIframe.location = url;
Combo2.focus()
}
function inicia(){
local1 = new Array();
var maximo1, i;
local1 = meuIframe.loc;
maximo1 = local1.length;
Combo2.options.length = 0;
addItem(Combo2,'TODAS AS CIDADES','',false,Combo2.length);
for (i=0;i<maximo1;i++){
addItem(Combo2,local1[i][1],local1[i][0],false,Combo2.length);
}
}
function addItem(obj,strText,strValue,blSel,intPos){
var newOpt,i,ArTemp,selIndex;
selIndex = (blSel)?intPos:obj.selectedIndex;
newOpt = new Option(strText,strValue);
Len = obj.options.length+1
if (intPos > Len) return
obj.options.length = Len
if (intPos != Len) {
ArTemp = new Array();
for(i=intPos;i<obj.options.length-1;i++)
ArTemp[i] = Array(obj.options[i].text,obj.options[i].value);
for(i=intPos+1;i<Len;i++)
obj.options[i] = new Option(ArTemp[i-1][0],ArTemp[i-1][1]);
}
obj.options[intPos] = newOpt;
if (selIndex > intPos)
obj.selectedIndex = selIndex+1;
else if (selIndex == intPos)
obj.selectedIndex = intPos;
}
</script>
É isso aí, no próximo artigo finalizaremos nosso exemplo implementando a segunda parte do tutorial que abordará os parâmetros necessários para o carregamento do segundo combo.
Um forte abraço,
Ronaldo
Roberta Maria Rohling em 28/09/2007
Bom dia! muito bom esse tuturial parabens Ronaldo. comigo não funcionou, também ficou no Aguarde...o combo está sendo carregado, Ronaldo ou alguem, por favor poderia me informar como posso corrigir este erro
obrigada...
Casemiro em 19/07/2007
Ótimo!
Sergio Freitas em 04/07/2007
Combo Dependente
José Augusto em 22/08/2006
Gostei muito da sua materia, mas não entendi o ponto do banco de dados.
Tem como vc me ensinar a gerar o banco de dados da cidade e estado?
Estou usando o SQL 2005.
Desde já agradeço.
654654 em 23/06/2006
6546
Pedro em 31/03/2006
Muito bom esse tuto!
2004-2008 Weblivre.net Todos os direitos reservados.
Quem somos | Política de Acesso | Anuncie | Na Mídia | Seja um Colunista | Sugestão de Pauta | Fale Conosco
Idealização: Webla - Comunicação Digital