Set the option available for select based on another select php

Question

Continent Table

1. ASIA
2. SOUTH AMERICA

Country Table

1. Japan
2. China
3. Brazil
4. Peru

This is the data in my table and i get all the data from continent table and country table like this

    <select name="continent" class='required InputBox'>
          <?php echo "<option value=''></option>"; 
    foreach (Contintent() as $value) { 
echo "<option id='" . $value[ 'sysid'] . "' value='" . $value[ 'name'] . "'>" . $value[ 'name'] . "</option>"; } ?>
        </select>

This is for country

<select name="country" class='required InputBox'>
              <?php echo "<option value=''></option>"; 
        foreach (Country() as $value) { 
    echo "<option id='" . $value[ 'sysid'] . "' value='" . $value[ 'name'] . "'>" . $value[ 'name'] . "</option>"; } ?>
            </select>

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

"UPDATE"

Found something here

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..

$('.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);
            }
        });

    });

in my function the php

function Country(){
if(isset($_POST['id'])){
echo $_POST['id'];
}
}

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 success:function(data){ what do i do next?

FYI

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.

Answer 1

Like it was said, you can use ajax. There is a static non-ajax way of doing it, but this way it is better in the long run.

Basically, what you do with that jQuery is listen for a change in the continent select box, and when a change happens, you make a request to the server asking: "give me all the countries within this continent". You should have a database for this or you can map them in static objects just to test it out.

$('.continent').change(function() {
    var id = $(this).val(); //get the current value's option
    $.ajax({
        type:'POST',
        url:'<path>/getCountries',
        data:{'id':id},
        success:function(data){
            //in here, for simplicity, you can substitue the HTML for a brand new select box for countries
            //1.
            $(".countries_container").html(data);

           //2.
           // iterate through objects and build HTML here
        }
    });
});

This would of course make you add the countries_container in the HTML like and inside it you would render the select:

<div class="countries_container"></div>

Now in the actual PHP code server side (getCountries) you could do something like:

$id = $_POST['id'];
if(isset($id) && <other validations>)){

  // 1. your query to get countries from a given continent
  // and for each result you can build the HTML itself

  // 2. OR, a better solution is to return an Object and then in the
  // success:function(data){ } iterate through it
}

This code can most defiantly be improved, but I tried to explain it in a understandable way.

Also, you should check:

Jquery ajax populate dropdown with json response data

Demo of linked drop down list by using Ajax & PHP

Keep on mind, these were the first results from a google search therefore, next time, try to search within stack overflow itself to avoid duplicate questions.