send select dropdown to another select dropdown
===

I'm making a website to learn coding and am making 2 select dropdowns that will have 1 be populated from the database table -> cat. The other select dropdown will be populated from table -> subcat. The database for cat and subcat look like this:

Table Cat

id (int 15) || cat(varchar 75) || number (int 3)


Table Subcat

id (int 15) || subcat(varchar 75) || catnumber (int 3)

Every subcat row has a catnumber that corresponds with the row in cat -> number. So for example if we have Restaurants which is a row in Cat that has a number of 2, then if we also have American Food, and Chinese Food which have catnumber's of 2, then they are corresponding. 

Here's my code for pulling out of the database for all 3 of my cat dropdowns.

    <p><b>Cat1:</b><br />
    <?php
      $query="SELECT id,cat FROM cat";
      $result = mysql_query ($query);
   	  echo"<select name='cselect1' class='e1'><option value='0'>Please Select A Category</option>";
      // printing the list box select command
      while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
      echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."</option>";

      }

      echo"</select>";
    ?>

    <!-- Next CAT -->

    <p><b>Cat2:</b><br />
    <?php
      $query="SELECT id,cat FROM cat";
      $result = mysql_query ($query);
   	  echo"<select name='cselect2' class='e1'><option value='0'>Please Select A Category</option>";
      // printing the list box select command
      while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
      echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."</option>";

      }

      echo"</select>";
    ?>

    <!-- Next CAT -->

    <p><b>Cat3:</b><br />
    <?php
      $query="SELECT id,cat FROM cat";
      $result = mysql_query ($query);
   	  echo"<select name='cselect3' class='e1'><option value='0'>Please Select A Category</option>";
      // printing the list box select command
      while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
      echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."</option>";

      }

      echo"</select>";
    ?>


And here's my code for pulling out of the database for all 3 of my **subcat** dropdowns

    <p><b>Subcat1:</b><br />
    <?php
      $query="SELECT * FROM subcat WHERE catnumber='1' ";
      $result = mysql_query ($query);
   	  echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>";
      // printing the list box select command
      while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
      echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

      }

      echo"</select>";
    ?>
    <p><b>Subcat2:</b><br />
    <?php
      $query="SELECT id,subcat FROM subcat WHERE catnumber='1' ";
      $result = mysql_query ($query);
   	  echo"<select name='sselect2' class='e1'><option value='0'>Please Select A Category</option>";
      // printing the list box select command
      while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
      echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

      }

      echo"</select>";
    ?> 
    <p><b>Subcat3:</b><br />
    <?php
      $query="SELECT id,subcat FROM subcat WHERE catnumber='1' ";
      $result = mysql_query ($query);
   	  echo"<select name='sselect3' class='e1'><option value='0'>Please Select A Category</option>";
      // printing the list box select command
      while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
      echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

      }

      echo"</select>";
    ?>

So right now all of the subcat selects are trying to get all the subcategories for the cat with a number of 1 ( which is Restaurants ). How do I get whatever is selected on the cat select to make (without refreshing the page) the corresponding subcat select display the corresponding subcat list for the number of the cat?

^ Very sorry for doing a terrible job explaining it. In the end I basically want it like Yelps -> [here][1]

Thanks for all help!

  [1]: http://www.yelp.com/biz_attribute?biz_id=Jsuy0DN6NhILXSkHr6UpCA