Set selectable option based on another php choice

Question

Continent table

• ASIA
• SOUTH AMERICA

Country table

• Japan
• China
• Brazil
• Peru

This is the data in my table, and I get all the data from the continent table and country table, as shown

<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 the 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 do this in such a way that when I choose a continent, for example, Asia, the option available for the district will be a country only in Asia, which is Japan and China. I also have another table after that, which is a city, but if I get the logic, I can apply it to the city. Any idea appreciated

"UPDATE"

Found here

That I am not familiar with ajax, can someone try to explain how it works, I want to know how I can pass the select identifier from this javascript fragment to my php functions page, here is a fragment ..

 $('.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 php function

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

The problem is that the id value is not passed, how to pass it to function.php. This happened in success:function(data){ , what will I do next?

FYI

The warning that it receives the identifier of the continent, it simply is not passed to function.php and console.log does not write anything, and when I change the url to the main page, on the page where select are located in console.log, it returns the code of the main page.

Answer 1

As said, you can use ajax. There is a static non-ajax way to do this, but that way, it is better in the long run.

Basically, what you do with this jQuery is listening to changes in the continent selection field, and when the change occurs, you go to the server asking: "Give me all the countries on this continent." You must have a database for this, or you can map them in static objects to check it.

 $('.continent').change(function() { var id = $(this).val(); //get the current value 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, of course, will add countries_container to the HTML, as inside it, you will display select :

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

Now on the server side of PHP (getCountries) you can 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 be improved most spectacularly, but I tried to explain it in an understandable way.

In addition, you should check:

Jquery ajax populate dropdown menu with json response data

Demo related dropdown using Ajax and PHP

Keep in mind that these were the first Google search results, so next time try searching the stack itself to avoid duplicate questions.