如何从子下拉列表中获取自动加载数据？

Question

我需要从第一个下拉列表中选择子类别。当我选择第一个下拉列表时，我需要在选择第一个下拉列表时出现第二个下拉列表。以下是我的代码：

<form action='' method="post">
    <?php
    error_reporting(E_ALL ^ E_NOTICE);
     $link = mysql_connect('localhost', 'root', '') or die('Could not connect to server.' );
    $conn = mysql_select_db('cattest', $link) or die('Could not select database.');

    ?>

    <table>
    <tr>
    <td>Choose category : </td><td>
    <select id="cat">
    <?php
    $sql=mysql_query("select * from category");

    while($getcat=mysql_fetch_assoc($sql)){
    	
    	$catid = $getcat['cid'];
    	$catname = $getcat['cat'];
    	
    	echo "
      <option value='$catid'>$catname</option>

    ";
    	
    }

    ?>
    </select>
    </td>

    </tr>
    <tr>
    <td>Choose subcategory : </td><td>
    <select id="sub">
    <?php
    $subsql=mysql_query("select * from sub where cid='$catid'");

    while($getsub=mysql_fetch_assoc($sql)){
    	
    	$subid = $getsub['cid'];
    	$subname = $getsub['cat'];
    	
    	echo "
      <option value='$subid'>$subname</option>

    ";
    	
    }

    ?>
    </select>
    </td>
    <script>
    $(function() {
        $('#cat').change(function() {
              $('.sub').hide();
              var v =  $('#cat option:selected').val();
              $('#sub_' + v).show();
        });
    });
    </script>
    </tr>
    </form>

请帮忙。我认为我的javascript代码有误。