title: Create dynamic drop down box
body: <p>I am trying to create a dependent dynamic drop down box on three input fields. At the moment the each input field is getting their data from their individual tables called tour_type, countries and destination. This is the form:</p>
  
  <pre><code>    &lt;label&gt;Tour Type &lt;/label&gt;
      &lt;select id="tourtype" name="tourtype" required&gt; 
      &lt;option value="" selected="selected"&gt;--Select--&lt;/option&gt;
      &lt;?php
  
      $sql=mysql_query("Select tour_type_id,tour_name from tour_type");
          while($row=mysql_fetch_array($sql))
          {
            $tour_type_id=$row['tour_type_id'];
            $name=$row['tour_name'];
            echo "&lt;option value='$tour_type_id'&gt;$name&lt;/option&gt;";
          }
          ?&gt;
      &lt;/select&gt;
  
  
      &lt;label&gt;Country &lt;/label&gt;
      &lt;select id="country" name="country" class="country" required&gt;
      &lt;option value="" selected="selected"&gt;-- Select --&lt;/option&gt; 
      &lt;?php 
      $sql=mysql_query("SELECT * FROM `countries`  where `tour_type_id` = ?"); //what should i put in here?
          while($row=mysql_fetch_array($sql))
          {
            $cid=$row['countries_id'];
            $name=$row['countries_name'];
  
            echo "&lt;option value='$cid'&gt;".$name."&lt;/option&gt;";
          }
          ?&gt;
          &lt;/select&gt;
  
  
      &lt;label&gt;Destination &lt;/label&gt;
      &lt;select id="destination" name="destination" class="destination" required&gt; 
          &lt;option value="" selected="selected"&gt;-- Select --&lt;/option&gt;
      &lt;?php 
      $sql=mysql_query("SELECT * FROM `destination`  where `countries_id` = ?");//what should i put in here?
  
  
          while($row=mysql_fetch_array($sql))
          {
            $destination_id=$row['destination_id'];
            $name=$row['destination_name'];
  
            echo "&lt;option value='$destination_id'&gt;".$name."&lt;/option&gt;";
          }
          ?&gt;
  
      &lt;/select&gt;
  </code></pre>
  
  <p>This is the javascript at the top of the form</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function()
  {
  $(".country").change(function()
  {
  var id=$(this).val();
  var dataString = 'id='+ id;
  
  $.ajax
  ({
  type: "POST",
  url: "ajax.php",
  data: dataString,
  cache: false,
  success: function(html)
  {
  $(".destination").html(html);
  } 
  });
  
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Finally these are the 3 tables i.e. tour_type, countries and destination respectively:</p>
  
  <p><img src="https://i.stack.imgur.com/mbW7Y.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/Ygh6u.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/QzeVN.png" alt="enter image description here"></p>
  
  <p>Can anyone help me on this? 
  How do I make each drop down box dependable on each other? For e.g. If i select Culture on the 1st drop down, then only Holland and Belgium should show in the 2nd drop down. So now if i select Holland from 2nd drop down, then Amsterdam should show in the 3rd drop down.</p>
  
  <p>This is the ajax.php which i am not too sure if it is right. </p>
  
  <pre><code>&lt;?php
  include('../config.php');
  if($_POST['']) //what should i put in here?
  {
  $id=$_POST['']; //what should i put in here?
  $sql=mysql_query //this is where i do not know what to put;
  
  while($row=mysql_fetch_array($sql))
  {
  //And what should i be placing here
  
  }
  }
  
  ?&gt;
  </code></pre>
  
  <p>This is what the web front end form looks like after implementing the code provided by dianuj. I still can not select the 2nd and 3rd drop down boxes:</p>
  
  <p><img src="https://i.stack.imgur.com/wXFdW.png" alt="enter image description here"></p>