设置可用于基于另一个选择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.