Weblivre.net - Informação em Primeiro Lugar

Assine nosso RSS
Publicado em 27/02/2006 - 6 comentários - Ler artigos relacionados - Você está em: Colunas » Dreamweaver

Combo Dinâmico – Parte 1

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:

Clique para ampliar...

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:

Clique para ampliar...

 

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&acirc;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);

?>

Em seguida, crie um documento Javascript (CTRL + N), conforme a figura abaixo e cole o código abaixo:


Clique para ampliar...

 

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

Autor: Ronaldo dos Santos Silva

Compartilhe:

Comentários

Comente este artigo!

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