Javascript Tiered Selects
Posted: Fri Aug 08, 2003 5:01 pm
I am not asking for help in this thread. I was asked if I would post an example of how to make tiered select boxes using javascript.
This example supposes you have the following table structure in a MySQL database:
Here is the form
here is the code to make $proj_array (a similar function makes $task_arryay)
here is the javascript code:
This example supposes you have the following table structure in a MySQL database:
Code: Select all
DEPARTMENT
dept_ID
dept_Name
PROJECT
project_ID
project_Name
project_DeptID
TASK
task_ID
task_Name
task_ProjectIDCode: Select all
<HTML>
<HEAD></HEAD>
<BODY>
<form name="form1" action="gohere.php" method="post">
<select name="dept_ID" onchange="Populate('form1','dept_ID','project_ID')">
<?
while($row=mysql_fetch_array($result_from_dept_query)){
echo '<option value="">Choose a department</option>';
echo '<option value="'.$row['dept_ID'].'">'.$row['dept_Name'].'</option>';
}
?>
</select>
<select name="project_ID" onchange="Populate('form1','project_ID','task_ID')">
</select>
<select name="task_ID">
</select>
</form>
</BODY>
</HTML>Code: Select all
<?
function make_project_array($db,$sql,$conn){
$result=$db->query($sql,$conn);
$dept_ID=0;
while($row=mysql_fetch_array($result)){
if($row['project_DeptID'] != $dept_ID){
$dept_ID=$row['project_DeptID'];
$i=0;
}
$proj_array[$dept_ID]['project_ID'][$i]=$row['project_ID'];
$proj_array[$dept_ID]['project_Name'][$i]=$row['project_Name'];
$i++;
}
return $proj_array;
}
?>Code: Select all
<script language="javascript">
<!--// Department to Project
<?
// create a two-dimensional Javascript array for each parent, containing the child_ID and child_Name (must echo to the browser)
// NOTE: you must create separate arrays for each tier (department-->project, project-->task, etc)
// PHP array formats:
// Department: $dept_array['dept_ID']; $dept_ID['dept_Name'];
// Project: $proj_array[$dept_ID]['project_ID']; $proj_array[$dept_ID]['project_Name'];
// formed by make_project_array() PHP code
// Task: $task_array[$project_ID]['task_ID']; $task_array[$project_ID]['task_Name'];
// Department to Project
for($i=0;$i<count($dept_array['dept_ID']);$i++){
$dept_ID=$dept_array['dept_ID'][$i];
echo "var prj_array_".$dept_ID." = new Array();";
echo "prj_array_".$dept_ID."[0] = new Array();";
echo "prj_array_".$dept_ID."[1] = new Array();";
echo "\n";
for($j=0;$j<count($proj_array[$dept_ID]['project_ID']);$j++){
echo "prj_array_".$dept_ID."[0][".$j."] = "".$proj_array[$dept_ID]['project_ID'][$j]."";";
echo "prj_array_".$dept_ID."[1][".$j."] = "".$proj_array[$dept_ID]['project_Name'][$j]."";";
}
}
// Project to Task
for($i=0;$i<count($dept_array['dept_ID']);$i++){
$dept_ID=$dept_array['dept_ID'][$i];
for($j=0;$j<count($proj_array[$dept_ID]['project_ID']);$j++){
$project_ID=$proj_array[$dept_ID]['project_ID'][$j];
echo "var task_array_".$project_ID." = new Array();";
echo "task_array_".$project_ID."[0] = new Array();";
echo "task_array_".$project_ID."[1] = new Array();";
for($q=0;$q<count($task_array[$project_ID]['task_ID']);$q++){
echo "task_array_".$project_ID."[0][".$q."] = "".$task_array[$project_ID]['task_ID'][$q]."";";
echo "task_array_".$project_ID."[1][".$q."] = "".$task_array[$project_ID]['task_Name'][$q]."";";
}
}
}
?>
function Populate(form_name,parent_field,child_field){
// reset the project select box
eval("document."+form_name+".elements['"+child_field+"']").length = 1;
eval("document."+form_name+".elements['"+child_field+"']").value = "";
eval("document."+form_name+".elements['"+child_field+"']").text = "Choose an option";
eval("document."+form_name+".elements['"+child_field+"']").selected = true;
// see if the selected department is valid (the first index is null -- "Choose an option")
if((eval("document."+form_name+".elements['"+parent_field"+']").SelectedIndex!=0) && eval("document."+form_name+".elements['"+parent_field"+']").value!=0){
// get the dept_ID for the selected department
var selected_Parent = eval("document."+form_name+".elements['"+parent_field+"'][document."+form_name+".elements['"+parent_field"+'].selectedIndex]").value;
// set the length for the project select box
var len= eval("array_"+selected_Parent+"[0]").length;
eval("document."+form_name+".elements['"+child_field+"']").length = len;
// Loop through the relevant array and populate the project drop down.
for (q=0; q<len; q++)
{
eval("document."+form_name+".elements['"+child_field+"'][q]").value = eval("array_" + selected_Parent + "[0][q]");
eval("document."+form_name+".elements['"+child_field+"'][q]").text = eval("array_" + selected_Parent + "[1][q]");
}
// select the first option in the project box
eval("document."+form_name+".elements['"+child_field+"'][0]").selected = true;
}
}
//-->
</script>