Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Iaê pessoal, beleza?
O que tá pegando é um seguinte:
Tenho duas caixas (<select> (...) </select>), onde somente a primeira (País) contém opções no ato do carregamento da página. A segunda (Estado) só é preenchida depois de feita a escolha de uma das opções existentes na primeira (País). Mas o grande problema é COMO FAZER ISSO SEM QUE HAJA UM "RELOAD" NA PÁGINA. Sei que é possível, mas não sei como fazê-lo.
Vai aí um endereço que tem exatamente o que eu estou pretendendo: http://match.msn.com.br/match/mt.cfm?pg=search
;) Valeu galera,
falow.....
Olá pessoal,
Rodrigo estou atras desse processo já faz umas semanas, encontrei aqui mas continou com o mesmo problema dos códigos que tenho aqui.
O primeiro select1 funciona perfeito carrega os dados e tudo, porém quando selecionou um item no select1 o segundo não carrega, e aparece a mensagem no barra de status: "ERRO NA PÁGINA"
Não sei o que pode ser, aparentemente, não fiz nada de novo nesse código que baixei, apenas mudei o nome das tabelas e consequentemente os nomes das colunas.
At.
Fabiano
Segue o códido caso queira dar uma olhada:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="Connections/Banco.asp" -->
<%
Dim rsMain
Dim rsMain_numRows
Set rsMain = Server.CreateObject("ADODB.Recordset")
rsMain.ActiveConnection = MM_Banco_STRING
rsMain.Source = "SELECT * FROM grupos ORDER BY nome ASC"
rsMain.CursorType = 0
rsMain.CursorLocation = 2
rsMain.LockType = 1
rsMain.Open()
rsMain_numRows = 0
%>
<%
Dim rsSub
Dim rsSub_numRows
Set rsSub = Server.CreateObject("ADODB.Recordset")
rsSub.ActiveConnection = MM_Banco_STRING
rsSub.Source = "SELECT * FROM produtos ORDER BY nome ASC"
rsSub.CursorType = 0
rsSub.CursorLocation = 2
rsSub.LockType = 1
rsSub.Open()
rsSub_numRows = 0
%>
<html>
<head>
<title>Client Side Dependent List Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body {
background-color: #FBFAF7;
margin: 5px;
}body, td, p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #2F2F2F;
}a:link {
color: #00497D;
text-decoration: underline;
}a:visited {
color: #00497D;
text-decoration: underline;
}a:hover {
color: #607E54;
text-decoration: none;
}a:active {
color: #FFFFFF;
}h1, h2, h3, h4, h5, h6, th {
font-family: Arial, Helvetica, sans-serif;
}h1 {
font-size: 1.75em;
color: #607E54;
}h2 {
font-size: 1.5em;
color: #00497D;
}h3 {
font-size: 1.25em;
color: #607E54;
}h4 {
font-size: 1.25em;
color: #00497D;
margin-bottom: 0px;
}h5 {
font-size: 1.25em;
color: #607E54;
}th {
font-size: 12px;
color: #607E54;
margin: 0px;
font-weight: bold;
}
select.select-type1 {
background-color: #E9E7D4;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 10px;
}-->
</style>
<!-- Dynamic Dependent List box Code for VBScript Server Model //-->
<script language="JavaScript">
<!--
var arrDynaList = new Array();
var arrDL1 = new Array();arrDL1[1] = "select1"; // Name of parent list box
arrDL1[2] = "form1"; // Name of form containing parent list box
arrDL1[3] = "select2"; // Name of child list box
arrDL1[4] = "form1"; // Name of form containing child list box
arrDL1[5] = arrDynaList; // No need to do anything here
<%
Dim txtDynaListRelation, txtDynaListLabel, txtDynaListValue, oDynaListRS
txtDynaListRelation = "i_grupo" ' Name of recordset field relating to parent
txtDynaListLabel = "nome" ' Name of recordset field for child Item Label
txtDynaListValue = "i_grupo" ' Name of recordset field for child Value
Set oDynaListRS = rsSub ' Name of child list box recordset
Dim varDynaList
varDynaList = -1
Dim varMaxWidth
varMaxWidth = "1"
Dim varCheckGroup
varCheckGroup = oDynaListRS.Fields.Item(txtDynaListRelation).Value
Dim varCheckLength
varCheckLength = 0
Dim varMaxLength
varMaxLength = 0
While (NOT oDynaListRS.EOF)
If (varCheckGroup <> oDynaListRS.Fields.Item(txtDynaListRelation).Value) Then
If (varCheckLength > varMaxLength) Then
varMaxLength = varCheckLength
End If
varCheckLength = 0
End If
%>
arrDynaList[<%=(varDynaList+1)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListRelation).Value)%>"
arrDynaList[<%=(varDynaList+2)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListLabel).Value)%>"
arrDynaList[<%=(varDynaList+3)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListValue).Value)%>"
<%
If (len(oDynaListRS.Fields.Item(txtDynaListLabel).Value) > len(varMaxWidth)) Then
varMaxWidth = oDynaListRS.Fields.Item(txtDynaListLabel).Value
End If
varCheckLength = varCheckLength + 1
varDynaList = varDynaList + 3
oDynaListRS.MoveNext()
Wend
If (varCheckLength > varMaxLength) Then
varMaxLength = varCheckLength
End If
%>
//-->
</script>
<!-- End of object/array definitions, beginning of generic functions -->
<script language="JavaScript">
<!--
function setDynaList(arrDL){
var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
var arrList = arrDL[5];
clearDynaList(oList2);
if (oList1.selectedIndex == -1){
oList1.selectedIndex = 0;
}
populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
return true;
}
function clearDynaList(oList){
for (var i = oList.options.length; i >= 0; i--){
oList.options* = null;*}
oList.selectedIndex = -1;
}
/This is a modified function from the original MM script. Mick White *
added the first line of oList so there would be an initial selection.
Needed this if there is only 1 child menu item, otherwise, the single
child menu item would be already hihghlighted and you can not select
it. Also good for validation purposes so you can set the .js
validation to not allow the first selection.
**/*
*function populateDynaList(oList, nIndex, aArray){*
*oList[oList.length]= new Option("Please Select");*
* for (var i = 0; i < aArray.length; i= i + 3){** if (aArray** == nIndex){*
oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
}
//oList.size=oList.length //You need to comment out this line of the function if you use this mod
}
//A quick mod here, I changed the ==0 to ==1 so that the length
//takes into account the Please select option from above.
if (oList.options.length == 1){
oList.options[oList.options.length] = new Option(":: No SubCategories Available ::");
}
oList.selectedIndex = 0;
}
//-->
*</script>*
*</head>*
<body bgcolor="#FFFFFF" text="#000000" onLoad="setDynaList(arrDL1)">
*<p> </p>*
*<form name="form1" method="post" action="">*
* <table width="650" border="0" cellspacing="0" cellpadding="5" align="center">*
* <tr> *
* <th valign="bottom" width="50%">Parent List Menu</th>*
* <th width="50%">Child List Menu</th>*
* </tr>*
* <tr> *
* <td valign="top" width="50%">Making any selection here repopulates *
* the Child List Box on the right.</td>*
* <td width="50%" valign="top"> <p>This set will say and highlight "<span class="attention">Please*
* Select</span>" whenever it is re-populated from the Parent *List Box. It will now maintain it's original height of 10
lines and will not grow/shrink vertically based
* on content.</p>*
* <p>I <span class="row-selected">commented out</span> the last *
* line in the function to make this work.</p></td>*
* </tr>*
* <tr> *
* <td align="center"> <select name="select1" size="10" onChange="setDynaList(arrDL1)" class="select-type1">*<%
While (NOT rsMain.EOF)
%>
<option value="<%=(rsMain.Fields.Item("i_grupo").Value)%>"><%=(rsMain.Fields.Item("nome").Value)%></option>
<%
rsMain.MoveNext()
Wend
If (rsMain.CursorType > 0) Then
rsMain.MoveFirst
Else
rsMain.Requery
End If
%>
* </select> </td>*
* <td align="center"> <select name="select2" size="10" class="select-type1">*
* </select> </td>*
* </tr>*
* <tr> *
* <td colspan="2"> <p> </p>*
* <p>This is a slightly modifed version of the <a href="*[http://www.macromedia.com/support/ultradev/ts/documents/client_dynamic_listbox.htm">technote](http://www.macromedia.com/support/ultradev/ts/documents/client_dynamic_listbox.htm%22)
* from Macromedia</a>.</p>*
* <p>All of the asp/vbscript is the same; we modified the function *described below to maintain the child list box's height and
the initially selected item to say "please select"
which helps in form validation so that the use must choose
* something other than the first item.</p>*
* <p> </p>*
* <h4>Here is the function to modify to:</h4>*
* <ol>*
* <li> maintain the height of 10</li>*
* <li> initially selected item to say "please select"</li>*
* </ol>*
*<pre><font size="2">function populateDynaList(oList, nIndex, aArray){*
*oList[oList.length]= new Option("Please Select");*
* for (var i = 0; i < aArray.length; i= i + 3){** if (aArray** == nIndex){*
oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
}
//oList.size=oList.length //You need to comment out this line of the function if you use this mod
}
//A quick mod here, I changed the ==0 to ==1 so that the length takes into account the Please select option
//from above.
if (oList.options.length == 1){
oList.options[oList.options.length] = new Option(":: No SubCategories Available ::");
}
oList.selectedIndex = 0;
}
*</font></pre></td>*
* </tr>*
* </table>*
*</form>*
*<p> </p>*
*<p> </p>*
*</body>*
*</html>*<%
rsMain.Close()
Set rsMain = Nothing
%>
<%
rsSub.Close()
Set rsSub = Nothing
%>
Ola cara ....
olha este exemplo ...pra mim resolveu .....
no meu caso o exemplo que tem no imasters não funcionou legal pois ele utilizou um loop dentro do outro e ficou pesado pois tinha muitos registros na base de dados.
Usa este pois é fácil de entender e é muito rápido.
Estou usando no mesmo esquema .. .Estados e cidades e é muito rápido .... você nem percebe que j a carregou ...
A, é o seguinte ... neste exemplo ele esta como list menu, mas é mudar a propriedade no dreamweaver para um select ... e o resto não muda nada.
http://www.roubaixinteractive.com/PlayGrou...nt_List_Box.asp
qualquer dúvida .... posta aí..
Fuiiiiiiiiiiiiiiiiiiiiiiiiiiiiii