View Single Post
Old 12-12-2010, 09:19 PM   #3
bxdobs
 
Join Date: Dec 2010
Posts: 3
Default

Still don't know if there is a SPRY way to accomplish a dynamic Select scenario?

I have managed to bash out a solution by getting my hands dirty.

Attached is code built using concepts from http://www.w3schools.com and a demo on this site http://www.dreamweaverclub.com/vtm/a...-dropdowns.php

I have removed any project specific references but here is the code I have put together to accomplish the posted request. Hopefully it may be usefull for others.

Code:
 
<!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=utf-8" />
<title>Test</title>
<form id='Selection'>
<select id='A' size='1' onchange=fnSelect('A',this.value)>
</select>
<select id='B' size='1' onchange=fnSelect('B',this.value)>
</select>
<select id='C' size='1' onchange=fnSelect('C',this.value)>
</select>
<select id='D' size='1' onchange=fnSelect('D',this.value)>
</select>
</form>
</head>
<body onload=fnSelect("","")>
<form id="Detail">
</form>
<script type="text/javascript" src="select.js"></script>
</body>
</html>
--------------------------------------------------------------------
// select.js
// JavaScript Document<script language="javascript">
function fnClearList(chType) // Clear List 
{
document.getElementById(chType).options.length = 0;
}
function fnAddToList(chType,chText,chVal) // Add to List
{ 
chLen = document.getElementById(chType).length;
if(chVal == "")
{
chValue = chLen;
} else {
chValue = chVal;
}
document.getElementById(chType).options[chLen]=new Option(chText,chValue);
}
function fnState(chType,chState)
{
if (chState == "Enable")
{
document.getElementById(chType).disabled=false;
} else {
document.getElementById(chType).disabled=true;
}
}
function fnSelect(chType,inValue)
{ 
switch(chType)
{
case "A":

fnState("B","Enable");
fnClearList("B");
fnAddToList("B"," --- Loading --- ","");
fnState("B","Disable");

fnClearList("C");
fnAddToList("C"," --- Select C --- ","");
fnState("C","Disable");

fnClearList("D");
fnAddToList("D"," --- Select D --- ","");
fnState("D","Disable");

fnGetData("B",inValue);

break; 

case "B": 

fnState("C","Enable");
fnClearList("C");
fnAddToList("C"," --- Loading --- ","");
fnState("C","Disable");

fnClearList("D");
fnAddToList("D"," --- Select D --- ","");
fnState("D","Disable");

fnGetData("C",inValue);

break; 

case "C": 

fnState("D","Enable");
fnClearList("D");
fnAddToList("D"," --- Loading --- ","");
fnState("D","Disable");

fnGetData("D",inValue);

break;

case "D": 

// load whatever the 4 list selections point to here

break;
default:
fnClearList("B");
fnAddToList("B"," --- Select B --- ","");
fnState("B","Disable");

fnClearList("C");
fnAddToList("C"," --- Select C --- ","");
fnState("C","Disable");

fnClearList("D");
fnAddToList("D"," --- Select D --- ","");
fnState("D","Disable");
fnGetData("A","*"); 

}
}

function fnUpdate(chType,chReturn)
{
fnState(chType,"Enable");
fnClearList(chType);

var chArray = chReturn.split('~');

var x;

for (x in chArray)
{
if(x%2==1)
{
// fnAddToList(<List ID>, <Text to List>, <list Value>)
fnAddToList(chType,chArray[x],chArray[x-1]);
}
}
// If there is only one row in the returned list then select the next list 
if(chArray.length ==2)
{
fnSelect(chType,chArray[0]);
}
}
function fnGetData(chType,chValue)
{
var xmlHttp; 

try
{
xmlHttp = new XMLHttpRequest(); // Opera 8.0+, Firefox, Safari, IE7 or greater

} catch (chErr) {

try // Internet Explorer Browsers IE6 or earlier
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (chErr) {

try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (chErr) {

alert("Sorry! There was a problem loading data in this Browser. Please try again using another Browser"); // Something went wrong

return false;
}
}
}

xmlHttp.onreadystatechange=function() // Receive Data Function 
{
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{

fnUpdate(chType, xmlHttp.responseText);

}
}

chUrl = "select.php";
chParm = "type=" + chType + "&" + "value=" + chValue;
chStr = chUrl+"?"+chParm;

xmlHttp.open("GET",chStr,true);
xmlHttp.send(null); 

// alert("get:" + chUrl + " " + chParm);
}
-----------------------------------------------------------------------------------------
// select.php
<?php
require_once("Connections/Database.php"); // database connection
// Retrieve data from Query String
$chType = $_GET['type'];
$chValue = $_GET['value'];
//build query
mysql_select_db($database_Database, $Database);
switch($chType)
{
case "A":
$query = "SELECT * FROM a";
$chID = "A_ID";
$chDesc = "A_Desc"; 
break;
case "B":
$query = "SELECT * FROM b WHERE A_ID = $chValue";
$chID = "Group_ID";
$chDesc = "B_Desc";
break; 
case "C":
$query = "SELECT * FROM c WHERE Group_ID = $chValue";
$chID = "C_ID";
$chDesc = "C_Desc";
break;
case "D":
$query = "SELECT * FROM d WHERE C_ID = $chValue";
$chID = "Spec_ID";
$chDesc = "Spec_Val";
break;
default:
$chID = "";
$chDesc = ""; 
}
$result = @mysql_query($query,$Database) or die(mysql_error()); 
$rowB = mysql_fetch_assoc($result);
$totalrows = mysql_num_rows($result);
//Build Result String
if($totalrows <> 1)
{
$dropdown = "0~ --- Select $chType --- "; 
}
// Insert a new row in the table for each person returned
do {
if($totalrows >= 2)
{
$dropdown .= "~$rowB[$chID]~$rowB[$chDesc]";
} else {
$dropdown = "$rowB[$chID]~$rowB[$chDesc]";
}
}while ($rowB = mysql_fetch_assoc($result));
$rows - mysql_num_rows($result);
if($rows > 0) {
mysql_data_seek($result,0);
$rowB = mysql_fetch_assoc($result);
}
// return list delimited by "~" in the form Value~Text
echo $dropdown;
mysql_close($Database);
?>
bxdobs is offline   Reply With Quote