Cascading Drop Downs
Posted: Tue Oct 27, 2009 11:00 pm
I want to implement a cascading down menu relationship between two drop down menus. I found this javascript code out there which seems to work ok, but I would like to incorporate php such that the values available in the drop downs are pulled from my mysql table.
Here's the HTML, Javascript and PHP code I pulled from the net:
You can pretty much just copy/paste the above and generate a linked set of drop downs.
Here's the php code/mysql queries I'd like to use to generate the values in teh above code:
The above code generates:
arms
back
chest
shoulder
The above code generates:
arms - 5 - long head of the biceps
arms - 6 - short head of the biceps
arms - 7 - brachialis
arms - 8 - brachioradialis
back - 3 - latissimus dorsi
back - 4 - upper trapezius
back - 9 - middle trapezius
back - 10 - lower trapezius
chest - 1 - pectoralis major
chest - 2 - pectoralis minor
shoulder - 11 - anterior (front) deltoid
shoulder - 12 - lateral (middle) deltoid
shoulder - 13 - Posterior (Rear) Deltoid
Admittedly, I am at a loss with Javascript, so I guess I need to get familiar, but aside from that, I not sure where to begin integrating the javascript and php to make this work. Any suggestions would appreciated.
Here's the HTML, Javascript and PHP code I pulled from the net:
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript">
var makes = new Array("BMW", "Ford");
var models = new Array();
models["BMW"] = new Array("318", "525", "650", "X5");
models["Ford"] = new Array("Bronco", "Explorer", "Focus");
function resetForm(theForm) { /* reset makes */ theForm.makes.options[0] = new Option("Please select a make", "");
for (var i=0; i<makes.length; i++) { theForm.makes.options[i+1] = new Option(makes[i], makes[i]);
} theForm.makes.options[0].selected = true; /* reset models */ theForm.models.options[0] = new Option("Please select a model", "");
theForm.models.options[0].selected = true;
}function updateModels(theForm) { var make = theForm.makes.options[theForm.makes.options.selectedIndex].value;
var newModels = models[make];
theForm.models.options.length = 0;
theForm.models.options[0] = new Option("Please select a model", "");
for (var i=0; i<newModels.length; i++) { theForm.models.options[i+1] = new Option(newModels[i], newModels[i]);
} theForm.models.options[0].selected = true;}
</script></head>
<body>
<form name="autoSelectForm" action="" method="post">
<select size="1" name="makes" onchange="updateModels(this.form)"></select>
<select size="1" name="models"></select><input type="submit"></form>
<script type="text/javascript">
resetForm(document.autoSelectForm);
</script>
<?php $make = $_POST['makes'];
$model = $_POST['models'];
if ($make && $model) {
echo "<p>".$make." - ".$model."</p>";
}?>You can pretty much just copy/paste the above and generate a linked set of drop downs.
Here's the php code/mysql queries I'd like to use to generate the values in teh above code:
Code: Select all
<?
$musclegrpquery = "SELECT DISTINCT REPLACE(B.optiongroupname,'muscle_','') AS optiongroupname FROM `MuscleMatrix` AS A JOIN `OptionGroup` AS B ON B.optiongroupid = A.musclegrpid ORDER BY B.optiongroupname";
$mg_result = mysql_query($musclegrpquery);
if (!$mg_result)
{
die("Could Not Query Database: <br />".mysql_error());
}
while ($row = mysql_fetch_array($mg_result)){
$muscl_grp =$row['optiongroupname'];
echo "$muscl_grp<br>";
}
echo "<br>";
?>arms
back
chest
shoulder
Code: Select all
<?
$musclequery = "SELECT muscleid, musclename, REPLACE(B.optiongroupname,'muscle_','') AS optiongroupname FROM `MuscleMatrix` AS A JOIN `OptionGroup` AS B ON B.optiongroupid = A.musclegrpid ORDER BY B.optiongroupname";
$ms_result = mysql_query($musclequery);
if (!$ms_result)
{
die("Could Not Query Database: <br />".mysql_error());
}
while ($row = mysql_fetch_array($ms_result)){
$muscleid =$row['muscleid'];
$muscl_grp =$row['optiongroupname'];
$musclename =$row['musclename'];
echo "$muscl_grp - $muscleid - $musclename<br>";
}
?>
</body></html>arms - 5 - long head of the biceps
arms - 6 - short head of the biceps
arms - 7 - brachialis
arms - 8 - brachioradialis
back - 3 - latissimus dorsi
back - 4 - upper trapezius
back - 9 - middle trapezius
back - 10 - lower trapezius
chest - 1 - pectoralis major
chest - 2 - pectoralis minor
shoulder - 11 - anterior (front) deltoid
shoulder - 12 - lateral (middle) deltoid
shoulder - 13 - Posterior (Rear) Deltoid
Admittedly, I am at a loss with Javascript, so I guess I need to get familiar, but aside from that, I not sure where to begin integrating the javascript and php to make this work. Any suggestions would appreciated.