title: Combobox that list items based in the selected item in another combobox
body: <p>I do have a routine that uses PHP, MySQL and JavaScript. There are two tables: tbl_category and tbl_subcategory just like this:</p>
  
  <h2>tbl_category</h2>
  
  <ol>
  <li>cat_id</li>
  <li>cat_name</li>
  </ol>
  
  <h2>tbl_subcategory</h2>
  
  <ol>
  <li>scat_id </li>
  <li>cat_parent_id</li>
  <li>cat_name</li>
  </ol>
  
  <p>They have some information inside like</p>
  
  <h2>tbl_category:</h2>
  
  <ol>
  <li>Pants</li>
  <li>Shoes</li>
  <li>t-Shirts</li>
  </ol>
  
  <h2>tbl_subcategory:</h2>
  
  <ol>
  <li>1 Jeans</li>
  <li>1 Heavy Duty</li>
  <li>2 Boots</li>
  <li>2 Sandals</li>
  <li>3 Long Sleeves</li>
  <li>3 Short Sleeves</li>
  <li>3 Polo</li>
  </ol>
  
  <p>I put in the file head the link to the javascript library:</p>
  
  <pre><code>&lt;script type="text/javascript" src="jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>of course I download previously from the jquery website(newer version).</p>
  
  <p>I have now the script routine:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
    $(document).ready(function(){
       $("select[name=cat_id").change(function(){
          $("select[name=scat_id]").html('&lt;option value=""&gt;Loading...&lt;/option&gt;');
          $.post("ajax_subcategory.php",
                {cat_id:$(this).val()},
                function(valor){
                   $("select[name=scat_id]").html(valor);
                }
                )
       })
    })
  </code></pre>
  
  <p></p>
  
  <p>Now I have the form, with the select field Category pre-loaded with data from the table tbl_category:</p>
  
  <pre><code>&lt;form name="form" method="post" action="" enctype="multipart/form-data"&gt;
  &lt;table width="100%" border="0" cellspacing="6" cellpadding="0"&gt;
  &lt;tr&gt;
     &lt;td align="right"&gt;Category:&lt;/td&gt;
     &lt;td&gt;&lt;select name="cat_id" &gt;
            &lt;option value="0"&gt;Choose category&lt;/option&gt;
      &lt;?php
               $sql1 =mysql_query("SELECT * FROM tbl_category ORDER by cat_name")or die(mysql_error());
              while($row = mysql_fetch_array($sql1))
              {
                 echo ("&lt;option value=\"$row[cat_id]\"" . ($sql1 == $row["cat_name"] ? " selected" : "") . "&gt;$row[cat_name]&lt;/option&gt;");  
              }
            ?&gt;&lt;/select&gt; 
     &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td align="right"&gt;Sub-category:&lt;/td&gt;
     &lt;td&gt;&lt;select name="scat_id" selected="selected" &gt;
         &lt;option value="0"&gt;Waiting category...&lt;/option&gt;
         &lt;/select&gt; 
     &lt;/td&gt;
   &lt;/tr&gt;
   &lt;/table&gt;
   &lt;input type="submit" name="submit" value="Submit"/&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>and then the php file called ajax_subcategory:</p>
  
  <pre><code>&lt;?php
  
  include "../connect_to_mysql.php";
  
  $cat_id = $_POST['cat_id'];
  
  $sql1 =mysql_query("SELECT * FROM tbl_subcategory WHERE cat_parent_id='$cat_id' ORDER by cat_name")or die(mysql_error());
  while($row = mysql_fetch_array($sql1))
   {
      echo ("&lt;option value=\"$row[scat_id]\"" . ($sql1 == $row["scat_name"] ? " selected" : "") . "&gt;$row[scat_name]&lt;/option&gt;");  
   }
   ?&gt;
  </code></pre>
  
  <p>Done! Everything looks perfect and beautiful. When I select the item in the first combo I can see the Javascript in action and the Loading... showing up but the  the second ComboBox always is empty
  don't matter what item I select it shows up empty and become smaller(width).</p>
  
  <p>This is a good routine and I saw working in the web from another website.</p>
  
  <p>Can you guys help me out to find a solution?</p>
  
  <p>Thanks</p>