AJAX drop down menus

[pyoungson]

Hi all,

 

I currently have a system of three php pages which contain three drop down boxes.  On the first page is a drop down box populated by unique values from a MySQL database.  JS then sends the user to the second page on selection of a menu item.  At the second page the next drop down is populated with unique values from the second column of the MySQL table which match the first column and the third page is much the same but the unique values have to match both the first and second.

 

I cannot change the table structure but would like to have all three drop down menus on the same page and have them updated in a similar way to these: http://www.autotrader.co.uk/ where you can select the first drop down and that updates the second and so on.

 

I have put the code for the three pages I currently have below and have been searching for an answer for this for two days now.  I am in the process of learning HTTP requests but I would be massively appreciative if someone could help me do this.

 

First Page:

 

<?php

include("database.php");

echo "<select name='school'"; ?>onchange="this.form.submit();" <?php echo "><option class='text' value='0' selected='selected'>Select a School</option><option class='text' value='%'>All</option>";

$mysqlschool="SELECT DISTINCT SCHOOL FROM ndlhe ORDER BY SCHOOL";
$resultschool = mysql_query($mysqlschool);

while($school=mysql_fetch_array($resultschool))
{
echo "<option value='$school[sCHOOL]'>" . $school[sCHOOL] . "</option>";
}

?>

 

Second Page:

<?php

include("database.php");

$e=$_POST["school"];
echo "<input type='hidden' name='school' value='$e'>";
if ($e!='%') echo $e;
else echo "All Schools";

?>

</select>
</td></tr>
<tr><td>
<p class="body">Subject</td><td>
<?php

include("database.php");



echo "<select name='subject'"; ?>onchange="this.form.submit();" <?php echo "><option class='text' value='0' selected='selected'>Select a Subject</option><option class='text' value='%'>All</option>";

$mysqlsubject="SELECT DISTINCT SUBJECT FROM ndlhe WHERE SCHOOL LIKE '".$e."' ORDER BY SUBJECT";
$resultsubject = mysql_query($mysqlsubject);

while($subject=mysql_fetch_array($resultsubject))
{
echo "<option value='$subject[sUBJECT]'>" . $subject[sUBJECT] . "</option>";
}

?>

 

Third Page:

<?php

include("database.php");

$e=$_POST["school"];
$f=$_POST["subject"];
echo "<input type='hidden' name='school' value='$e'>";
echo "<input type='hidden' name='subject' value='$f'>";
if ($e!='%') echo $e;
else echo "All Schools";

?>

</select>
</td></tr>
<tr><td>
<p class="body">Subject: </td><td>
<?php

include("database.php");

if ($f!='%') echo $f;
else echo "All Subjects";

?>

</select>
</td></tr>
<tr><td>
<p class="body">Course</td><td>

<?php

include("database.php");

echo "<select name='courses'"; ?>onchange="this.form.submit();" <?php echo "><option class='text' value='0' selected='selected'>Select a Course</option><option class='text' value='%'>All</option>";

$mysqlcourse="SELECT DISTINCT COURSE FROM ndlhe WHERE SCHOOL LIKE '".$e."' AND SUBJECT LIKE '".$f."' ORDER BY COURSE";
$resultcourse = mysql_query($mysqlcourse);

while($course=mysql_fetch_array($resultcourse))
{
echo "<option value='$course[COURSE]'>" . $course[COURSE] . "</option>";
}

?>

 

I have not included all /select and formatting as this currently works well.  Would just love it to be more elegant.

 

Thank you for reading this far...