PDA

View Full Version : help with dynamic dependent list boxes


Anton_FA
12-17-2002, 12:08 AM
Greetings

I am trying to create a page with two list boxes.

The parent list box controls the contents of the child list box.

I have been following the instructions listed on http://www.macromedia.com/support/ultradev/ts/documents/client_dynamic_listbox.htm

but i'm running into problems. I cant get the list boxes to relate - for a start.

Both list boxes are created from a database.



I've pasted my page code below:
<?php
//Connection statement
require_once('../Connections/connCarina_SendDB.php');

// begin Recordset
$query_rsDropParent = "SELECT DISTINCT FLIGHTDATE FROM Process ORDER BY FLIGHTDATE ASC";
$rsDropParent = $connCarina_SendDB->SelectLimit($query_rsDropParent) or die($connCarina_SendDB->ErrorMsg());
$totalRows_rsDropParent = $rsDropParent->RecordCount();
// end Recordset

// begin Recordset
$query_rsFlightNum = "SELECT DISTINCT FLIGHTNUM FROM Process ORDER BY FLIGHTNUM ASC";
$rsFlightNum = $connCarina_SendDB->SelectLimit($query_rsFlightNum) or die($connCarina_SendDB->ErrorMsg());
$totalRows_rsFlightNum = $rsFlightNum->RecordCount();
// end Recordset
//PHP ADODB document - made with PHAkt 2.1.0?>
<!-- Dynamic Dependent List box Code for *** JavaScript *** Server Model //-->

<script language="JavaScript">


var arrDynaList = new Array();
var arrDL1 = new Array();

arrDL1[1] = "DDdate"; // Name of parent list box
arrDL1[2] = "form1"; // Name of form containing parent list box
arrDL1[3] = "flightNum"; // Name of child list box
arrDL1[4] = "form1"; // Name of form containing child list box
arrDL1[5] = arrDynaList;

<%
var txtDynaListRelation, txtDynaListLabel, txtDynaListValue, oDynaListRS;

txtDynaListRelation = "Relation" // Name of recordset field relating to parent
txtDynaListLabel = "Label" // Name of recordset field for child Item Label
txtDynaListValue = "Value" // Name of recordset field for child Value
oDynaListRS = rsFlightNum // Name of child list box recordset

var varDynaList = -1;
var varMaxWidth = "1";
var varCheckGroup = oDynaListRS.Fields.Item(txtDynaListRelation).Value;
var varCheckLength = 0;
var varMaxLength = 0;

while (!oDynaListRS.EOF){

if (varCheckGroup != oDynaListRS.Fields.Item(txtDynaListRelation).Value) {
varMaxLength = Math.max(varCheckLength, varMaxLength)
varCheckLength = 0;
}
%>
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 (oDynaListRS.Fields.Item(txtDynaListLabel).Value.length > varMaxWidth.length) {
varMaxWidth = oDynaListRS.Fields.Item(txtDynaListLabel).Value;
}
varCheckLength = varCheckLength + 1;
varDynaList = varDynaList + 3;
oDynaListRS.MoveNext();
}
varMaxLength = Math.max(varCheckLength, varMaxLength)
%>


//-->
</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[i] = null;
}

oList.selectedIndex = -1;
}

function populateDynaList(oList, nIndex, aArray){

for (var i = 0; i < aArray.length; i= i + 3){
if (aArray[i] == nIndex){
oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
}
}

if (oList.options.length == 0){
oList.options[oList.options.length] = new Option("[none available]",0);
}

oList.selectedIndex = 0;
}

//-->
</script>

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
</head>

<body onLoad="MM_callJS('setDynaList(arrDL1)')">
<form name="form1" method="post" action="">
<p>
<select name="DDdate" size="1" id="DDdate" onChange="MM_callJS('setDynaList(arrDL1)')">
<?php
while(!$rsDropParent->EOF){
?>
<option value="<?php echo $rsDropParent->Fields('FLIGHTDATE')?>"<?php if (!(strcmp($rsDropParent->Fields('FLIGHTDATE'), $rsDropParent->Fields('FLIGHTDATE')))) {echo "SELECTED";} ?>><?php echo $rsDropParent->Fields('FLIGHTDATE')?></option>
<?php
$rsDropParent->MoveNext();
}
$rsDropParent->MoveFirst();
?>
</select>
<select name="flightNum" size="1" id="flightNum">
<?php
while(!$rsFlightNum->EOF){
?>
<option value="<?php echo $rsFlightNum->Fields('FLIGHTNUM')?>"<?php if (!(strcmp($rsFlightNum->Fields('FLIGHTNUM'), $rsFlightNum->Fields('FLIGHTNUM')))) {echo "SELECTED";} ?>><?php echo $rsFlightNum->Fields('FLIGHTNUM')?></option>
<?php
$rsFlightNum->MoveNext();
}
$rsFlightNum->MoveFirst();
?>
</select>
</p>
</form>
</body>
</html>
<?php
$rsDropParent->Close();

$rsFlightNum->Close();
?>

Thanks bigtime for any help or suggestions

Skyzyx
12-17-2002, 02:18 AM
You could probably modify your code around the combo box code from this page: http://www.javascriptkit.com/script/cut183.shtml

Anton_FA
12-17-2002, 03:41 AM
Thanks Skyzyx

Thats pretty much what I'm after, although I'm not sure how to convert this to having two lists which are both dynamicly populated.

Do you have any ideas/advice?

thanks again