HELP: change second select menu depending on first selection in javascript/ php

[JoeyWong]

Hi all, what i want to do is when I select institution A, then the school of institution A come out at the second selection only.. when I select institution B, then the school of institution B come out at second the selection...etc
Help...Thanks~

<?php $sql = "SELECT DISTINCT i_name FROM school";
// execute query
$result = mysql_query($sql);
if(isset($_POST["InstitutionName"]))
    $InstitutionName = $_POST["InstitutionName"];
echo"<select name='InstitutionName'>";
while ($row = mysql_fetch_array($result))
{   $i_name=$row["i_name"];
    echo"<option value='$i_name'";
    if (isset($InstitutionName) && $InstitutionName == $i_name)
        echo " selected> $i_name";
    else    echo "> $i_name";     }
echo "</select><br>"; ?>
  </td>
</tr>
<tr valign="baseline">
  <td nowrap="nowrap" align="left">School Name</td>
  <td>:</td>
  <td>School of &nbsp;
<?php $sql = "SELECT DISTINCT s_name from school";
// execute query
$result = mysql_query($sql);
if(isset($_POST["SchoolName"]))
    $SchoolName = $_POST["SchoolName"];
echo"<select name='SchoolName'>";
while ($row = mysql_fetch_array($result))
{   $s_name=$row["s_name"];
    echo"<option value='$s_name'";
    if (isset($SchoolName) && $SchoolName ==$s_name)
        echo " selected> $s_name";
    else    echo "> $s_name";     }
echo "</select><br>"; ?> 
  </td>
</tr>