title: Two drop down list, second one populated with values in database
body: <p>I need to make two drop down lists. Let's say the first one containing food categories: Ice Cream, Pizzas, Noodles, Milkshakes. </p>
  
  <p>So if I pick ice cream the second drop down list would contain: Chocolate, Vanilla, Mint and so on. And if I pick Pizzas at the first one, I want this second one to change dynamically so that it would contain: Pepperoni, All Meat, and so on.</p>
  
  <p>However, I need the second drop down list to be populated by the values I already have in my database. So let's say if I'm out of chocolate ice cream there would be no chocolate in the second drop down list. That is my desired outcome.</p>
  
  <p>I am using HTML, PHP, JavaScript/jQuery, and MySQL so currently it's a webapp and these two drop down list are for me to delete values from the database. So let's say I want to delete Pepperoni from Pizzas, I would select Pizzas at the first drop down list and then Pepperoni at the second drop down list. Then I would click delete which would execute a js function to pass the parameters using ajax to PHP and then the delete query can be executed.</p>
  
  <p>I am stuck on populating the second drop down list dynamically, any help on this? What I've done so far for the drop down is only:</p>
  
  <pre><code>                 &lt;select id="tester_type"&gt;
                      &lt;option value=""&gt;&lt;/option&gt;
                      &lt;option value="LMX"&gt;LMX&lt;/option&gt;
                      &lt;option value="LCX"&gt;LCX&lt;/option&gt;
                      &lt;option value="CAT"&gt;CAT&lt;/option&gt;
                      &lt;option value="J750"&gt;J750&lt;/option&gt;
                      &lt;option value="HPPS"&gt;HPPS&lt;/option&gt;
                      &lt;option value="HP93K"&gt;HP93K&lt;/option&gt;
                      &lt;option value="UFLEX"&gt;UFLEX&lt;/option&gt;
                      &lt;option value="IFLEX"&gt;IFLEX&lt;/option&gt;
                      &lt;option value="QRT"&gt;QUARTET&lt;/option&gt;
                      &lt;option value="TGR"&gt;TIGER&lt;/option&gt;
                      &lt;option value="ETS"&gt;ETS&lt;/option&gt;
                      &lt;option value="LEX"&gt;LEX&lt;/option&gt;
                      &lt;option value="HPLC"&gt;HPLC&lt;/option&gt;
                      &lt;option value="HPSS"&gt;HPSS&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;New Tester Name:&lt;/td&gt;
          &lt;td&gt;
              &lt;select id="tester_type"&gt;
                  &lt;!--Update list of available testers--&gt;
              &lt;/select&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p>Note: I just replaced the first drop down list as food category for a better understanding of my question by the way. Just take the first one as food categories and the second would be its type/flavors.</p>
  
  <p>EDIT:</p>
  
  <p>It doesn't display anything in the desired section/div in the window. Just a blank except for the title I have added in my HTML and other two buttons.</p>
  
  <p>What I have done according to Brandon's answer:</p>
  
  <p>In the HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Delete Tester&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
          &lt;script language="javascript" type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="function.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;displayDropDown();&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;h3&gt;Delete Tester&lt;/h3&gt;
          &lt;div id="drop_two_list"&gt;&lt;/div&gt;
          &lt;table class="deleteTable"&gt;
              &lt;tr&gt;
                  &lt;td/&gt;&lt;td&gt;&lt;br&gt;
                      &lt;input type="button" value="Cancel" onclick="window.close();"/&gt;
                      &lt;input type="button" name="send" value="Delete" onclick="deleteTester();"/&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In the external javascript file:</p>
  
  <pre><code>function dislplayDropDown()
  {
  var page = "database.php";
  
  $.post(page, {
      action : "dislplayDropDown"
      }, function(data) {
      $("div#drop_two_list").html(data);
      alert(data);
  });
  </code></pre>
  
  <p>In the PHP:</p>
  
  <pre><code>function displayDropDown()
  {
      $tester_info = "dummy_tester_list";
      $query_string = "select * from $tester_info";
      $result = @mysql_query($query_string) or die (mysql_error());
      $data = mysql_fetch_array($result) or die (mysql_error());
  
      echo "&lt;select id=\"tester_type\"&gt;";
      while($data)
      {
          echo "&lt;option value='$data['tester_type']'&gt;$data['tester_type']&lt;/option&gt;"; // first drop down
      }
      echo "&lt;/select&gt;";
  
      $selected_tester_type = $_REQUEST['tester_type'];
  
      $query_string = "select * from $tester_info where tester_type = $selected_tester_type";
      $result = @mysql_query($query_string) or die (mysql_error());
      $data = mysql_fetch_array($result) or die (mysql_error());
  
      echo "&lt;select&gt;";
      while($data)
      {
          echo "option id=\"tester_name\" value='$data['tester_name']'&gt;$data['tester_name']&lt;/option&gt;"// second drop down
      }
      echo "&lt;/select&gt;";
  }
  
  ?&gt;
  &lt;?php
  
  $action = rtrim($_REQUEST['action']);
  
  if($action=="insert")//This is for some other function
  {
      $tester_type = rtrim($_REQUEST['tester_type']);
      $tester_name  = rtrim($_REQUEST['tester_name']);
  
      echo checkDuplicateTesterName($tester_type, $tester_name);
  }
  else if($action=="displayDropDown")
  {
      echo displayDropDown();
  }
  
  
  ?&gt;
  </code></pre>
  
  <p>Here's the table structure as requested by Kentot, it's only the first five rows because there's more than 500 rows so I wouldn't want to put the whole thing here:</p>
  
  <pre><code>  id    tester_type   tester_name
     1        LMX          LMX-01
     2        LMX          LMX-04
     3        LMX          LMX-05
     4        LMX          LMX-06
     5        LMX          LMX-07
  </code></pre>