title: Set the option available for select based on another select php
body: <p>Continent Table</p>
  
  <ol>
  <li>ASIA </li>
  <li>SOUTH AMERICA</li>
  </ol>
  
  <p>Country Table </p>
  
  <ol>
  <li>Japan </li>
  <li>China</li>
  <li>Brazil </li>
  <li>Peru</li>
  </ol>
  
  <p>This is the data in my table and i get all the data from continent table and country table like this</p>
  
  <pre><code>    &lt;select name="continent" class='required InputBox'&gt;
            &lt;?php echo "&lt;option value=''&gt;&lt;/option&gt;"; 
      foreach (Contintent() as $value) { 
  echo "&lt;option id='" . $value[ 'sysid'] . "' value='" . $value[ 'name'] . "'&gt;" . $value[ 'name'] . "&lt;/option&gt;"; } ?&gt;
          &lt;/select&gt;
  </code></pre>
  
  <p>This is for country</p>
  
  <pre><code>&lt;select name="country" class='required InputBox'&gt;
                &lt;?php echo "&lt;option value=''&gt;&lt;/option&gt;"; 
          foreach (Country() as $value) { 
      echo "&lt;option id='" . $value[ 'sysid'] . "' value='" . $value[ 'name'] . "'&gt;" . $value[ 'name'] . "&lt;/option&gt;"; } ?&gt;
              &lt;/select&gt;
  </code></pre>
  
  <p>I want to know how to make it in a way that when i select the continent for example asia the option available for county will be the country in asia only which is japan and china. I also have another table after this which is city but if i get the logic here i can apply it to city. Any idea is appreciated</p>
  
  <p>"UPDATE"</p>
  
  <p>Found something <a href="https://superuser.com/questions/749302/pass-a-javascript-variable-to-php-via-ajax">here</a></p>
  
  <p>One that i am not familiar with is the ajax can anybody try to explain how it work i want to know how i can pass the id of the select from this javascript snippet to my php function page here is the snippet..</p>
  
  <pre><code>$('.continent').change(function() {
          var id = $(this).find(':selected')[0].id;
          //alert(id); 
          $.ajax({
              type:'POST',
              url:'../include/functions.php',
              data:{'id':id},
              success:function(data){
                  // the next thing you want to do 
  console.log(data);
                  alert(id);
              }
          });
  
      });
  </code></pre>
  
  <p>in my function the php</p>
  
  <pre><code>function Country(){
  if(isset($_POST['id'])){
  echo $_POST['id'];
  }
  }
  </code></pre>
  
  <p>The problem is the value of id is not passed how do i pass it onto the function.php i kind of out of idea here. Does it happened in <code>success:function(data){</code> what do i do next?</p>
  
  <p><code>FYI</code></p>
  
  <p>The alert is ok it gets the id of the continent already it is just not passed to the function.php
  and console.log writes nothing
  and when i change the url to main page the page where the select are in the console.log returns the main page code.</p>