If you want to do it AJAX style, this isn't the way...
If you want it the way I'm doing it:
put this in a js file and link it in:
function update(e, dd)
{
for (j=1; j < dd.length; j++)
{
dd[j][0] = true;
}
for (j=1; j < dd[0].length; j++)
{
for (i=1; i < dd.length; i++)
{
current = dd[i][j].split("|");
value = current[0];
choice = current[0];
if (current.length == 2) choice = current[1];
if (value != document[dd[0][0]][dd[0][j]][document[dd[0][0]][dd[0][j]].selectedIndex].value) dd[i][0] = false;
}
if (e == document[dd[0][0]][dd[0][j]])
{
dropdown(j+1,dd);
for (k=j+2; k < dd[0].length; k++)
{
document[dd[0][0]][dd[0][k]].length = 0;
}
break;
}
}
}
function dropdown(item,dd)
{
var pre1 = "";
var j = 1;
document[dd[0][0]][dd[0][item]].options.length = 0;
document[dd[0][0]][dd[0][item]].options[0] = new Option('Select ' + dd[0][item], '');
document[dd[0][0]][dd[0][item]].options[0].selected = true;
for (i=1; i < dd.length; i++)
{
if (dd[i][0] || item == 1)
{
current = dd[i][item].split("|");
value = current[0];
choice = current[0];
if (current.length == 2) choice = current[1];
if (value != pre1)
{
var op = new Option(choice, value);
document[dd[0][0]][dd[0][item]].options[j] = op;
j++;
pre1 = value;
}
}
}
}
put this (or something like it) on your page:
<script type="text/JavaScript" language="JavaScript">
var companies = new Array(
new Array("form","Regiment","Company"),
new Array(true,"10|10th","HQ"),
new Array(true,"10|10th","A"),
new Array(true,"10|10th","B"),
new Array(true,"10|10th","C"),
new Array(true,"10|10th","D"),
new Array(true,"10|10th","E"),
new Array(true,"10|10th","H"),
new Array(true,"10|10th","I"),
new Array(true,"10|10th","K"));
</script>
<form action="rosters.php" method="get" name="form">
<p align="center">
<select onchange="update(this, companies)" size="1" name="Regiment">
<option>Select Regiment</option>
<option></option>
<option></option>
<option></option>
</select>
<select onchange="document.form.submit()" size="1" name="Company">
<option>Select Company</option>
<option></option>
<option></option>
<option></option>
</select>
</p>
</form>
The above HTML was created with this PHP (using ADOdb for PHP as my db abstraction layer):
PHP:
$sql_get_regiments = "SELECT DISTINCT(regiment) FROM volunteers ORDER BY regiment";
$rs_regiments=$db->Execute($sql_get_regiments);
echo "<script type=\"text/JavaScript\" language=\"JavaScript\">\n";
echo "var companies = new Array(\n";
echo "new Array(\"form\",\"Regiment\",\"Company\"),\n";
$i = 0;
while ( !$rs_regiments->EOF) {
$sql_get_companies = "SELECT company FROM volunteers WHERE regiment = " . $rs_regiments->fields['regiment'] . " GROUP BY company ORDER BY company";
$rs_companies=$db->Execute($sql_get_companies);
while ( !$rs_companies->EOF) {
if ($i > 0 ) {
echo ",\n";
}
echo "new Array(true,\"" . $rs_regiments->fields['regiment'] . "|" . ordinal($rs_regiments->fields['regiment']) . "\",\"" . str_replace('1','HQ',$rs_companies->fields['company']) . "\")";
$rs_companies->MoveNext();
$i++;
}
$rs_regiments->MoveNext();
}
echo ");\n</script>\n";
This code creates the drop downs on this page:
http://www.ajandj.com/diary/rosters.php
It currently only works for one regiment because I only have one regiment in the database... but once I have another regiment in it should work just fine. This code should be easily ported to work with continents, countries and states.