I've seen this address numerous time, but in my search, didn't find my particular problem.
I have 3 drop down boxes in a form. The options of the second depends on the selection of the first and the options of the third depend on the selection of the second.
I can get it to work for two, but am having trouble figuring out how to get it to work for three.
Essentially, my problem is how do I build a SELECT statement using the javascript variable from the first drop down box?
This is what I have that works for two select boxes:
<html>
<head>
<title>Untitled</title>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!-- start javascript
function setDept(myDir,myDept) {
<?php
include "connectdb.php";
$locksql = "LOCK TABLES dirs READ, codes READ";
$lockreq = mysql_query($locksql) or die("Couldn't execute query<br>$locksql\n");
$sqlD = "SELECT dir FROM dirs ORDER BY dir";
$resultD = mysql_query($sqlD) or die("Couldn't execute query<br>$sql\n");
while ($rowD = mysql_fetch_array($resultD)) {
echo " var arr".$rowD['dir']." = new Array(\"".$rowD['dir']." Org Codes\"";
$sqlO = "SELECT * FROM codes WHERE dircode = '".$rowD['dir']."' ORDER BY dircode";
$resultO = mysql_query($sqlO) or die("Couldn't execute query<br>$sql\n");
while ($rowO = mysql_fetch_array($resultO)) {
echo ",\"".$rowO['orgcode']."\"";
}
echo ");\n";
}
$locksql = "UNLOCK TABLES";
$lockreq = mysql_query($locksql) or die("Couldn't execute query<br>$locksql\n");
?>
var arrCW = new Array("CW");
var selectDir = myDir;
var selectDept = myDept;
var theDir = selectDir.options[selectDir.selectedIndex].value;
var theDept = selectDept.options[selectDept.selectedIndex].value;
<?php
$locksql = "LOCK TABLES dirs READ";
$lockreq = mysql_query($locksql) or die("Couldn't execute query<br>$locksql\n");
$sql = "SELECT dir FROM dirs ORDER BY dir";
$result = mysql_query($sql) or die("Couldn't execute query<br>$sql\n");
while ($row = mysql_fetch_array($result)) {
$dr = $row['dir'];
echo " if (theDir == \"".$row['dir']."\") {\n";
echo " selectDept.options.length = 0;\n";
echo " for (var i=0; i<arr".$dr.".length; i++) {\n";
echo " selectDept.options[selectDept.options.length] = new Option(arr".$dr."[i]);\n";
echo " selectDept.options[0].selected = true;\n";
echo " }\n";
echo " }\n";
}
$locksql = "UNLOCK TABLES";
$lockreq = mysql_query($locksql) or die("Couldn't execute query<br>$locksql\n");
mysql_close ($dblink);
?>
if (theDir == "CW") {
selectDept.options.length = 0;
for (var i=0; i<arrCW.length; i++) {
selectDept.options[selectDept.options.length] = new Option(arrCW[i]);
selectDept.options[0].selected = true;
}
}
}
// end javascript -->
</SCRIPT>
</head>
<body>
<form name="input">
Dirs:
<select name="dir" onChange="setDept(document.input.dir,document.input.code)">
<option value="">Dirs</option>
<?php
include "connectdb.php";
$locksql = "LOCK TABLES dirs READ";
$lockreq = mysql_query($locksql) or die("Couldn't execute query<br>$locksql\n");
$sql = "SELECT dir FROM dirs ORDER BY dir";
$result = mysql_query($sql) or die("Couldn't execute query<br>$sql\n");
while ($row = mysql_fetch_array($result)) {
echo " <option value=\"".$row['dir']."\">".$row['dir']."</option>\n";
}
$locksql = "UNLOCK TABLES";
$lockreq = mysql_query($locksql) or die("Couldn't execute query<br>$locksql\n");
mysql_close ($dblink);
?>
<option value="CW">CW</option>
</select>
<br>Code:
<SELECT NAME="code">
<OPTION value="">--- Codes</option>
<OPTION value=<?=$Dept?>></option>
<OPTION value=<?=$Dept?>></option>
</select>
<br><input type="submit" name="submit" value="submit"> <input type="Reset">
</form>
</body>
</html>
View Source gives this:
<html>
<head>
<title>Untitled</title>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!-- start javascript
function setDepartment(myDir,myDept) {
var arrAD = new Array("AD Codes","AD","AD01","AD02","AD03","AD04","AD10","ADC");
var arrCD = new Array("CD Codes","CD","CD01","CD02","CD03","CD10","CD20","CDC");
var arrED = new Array("ED Codes","ED","ED01","ED02","ED03","ED04","ED10","EDC");
var arrCW = new Array("CW");
var selectDir = myDir;
var selectDept = myDept;
var theDir = selectDir.options[selectDir.selectedIndex].value;
var theDept = selectDept.options[selectDept.selectedIndex].value;
if (theDir == "AD") {
selectDept.options.length = 0;
for (var i=0; i<arrAD.length; i++) {
selectDept.options[selectDept.options.length] = new Option(arrAD[i]);
selectDept.options[0].selected = true;
}
}
if (theDir == "CD") {
selectDept.options.length = 0;
for (var i=0; i<arrCD.length; i++) {
selectDept.options[selectDept.options.length] = new Option(arrCD[i]);
selectDept.options[0].selected = true;
}
}
if (theDir == "ED") {
selectDept.options.length = 0;
for (var i=0; i<arrED.length; i++) {
selectDept.options[selectDept.options.length] = new Option(arrED[i]);
selectDept.options[0].selected = true;
}
}
if (theDir == "CW") {
selectDept.options.length = 0;
for (var i=0; i<arrCW.length; i++) {
selectDept.options[selectDept.options.length] = new Option(arrCW[i]);
selectDept.options[0].selected = true;
}
}
}
// end javascript -->
</SCRIPT>
</head>
<body>
<form name="input">
Dirs:
<select name="dir" onChange="setDep(document.input.dir,document.input.code)">
<option value="">Directorates</option>
<option value="AD">AD</option>
<option value="CD">CD</option>
<option value="ED">ED</option>
<option value="CW">CW</option>
</select>
<br>Code:
<SELECT NAME="code">
<OPTION value="">--- Codes</option>
<OPTION value=></option>
<OPTION value=></option>
</select>
<br><input type="submit" name="submit" value="submit"> <input type="Reset">
</form>
</body>
</html>
Any ideas on how to add another select list. Or another JavaScript approach that will work better. I'm pretty weak on JavaScript, so please keep it simple. Begging my employer to send me to a JavaScript class. If anyone knows of a good one, please let me know. Prefer the SE US so I don't have to fly. 🙂
p.s. I changed some names of variables, so if you find one I missed, please ignore it. The code as it sits on my server works.
Thanks 🙂
