自动加载下拉菜单值

i have a problem, I have 3 drop down menus, and all of them are connected, i am creating a system that would automatically display the city's zipcode based on the provice and city of the user.

For example, the user chooses province A, then here's my problem, how would i make it so that when the user chooses province A, the system would display all the cities inside province A? i already have a complete database of the zipcode of my country, and after choosing the city, the zipcode will automatically be displayed in a text box that should not be editable but not disabled, disabling a text box would disregard it's content as i remember,

here is my query for the province,

$query = 'SELECT DISTINCT major_area FROM zipcodes GROUP BY major_area ORDER BY major_area asc ';
                        $result = mysql_query($query) or die(mysql_error());
                        echo "<select name='categories' required>";
                        echo "<option value =''>Select Province</option>";
                        while ($row = mysql_fetch_array($result)){
                          $major_area = $row['major_area'];
                          echo "<option value='$major_area'>$major_area</option>";
                        }

                        echo "</select>";

here is my query for the city drop down and major_area is shown with an example with entry 'ABRA'

$query = "SELECT DISTINCT city FROM zipcodes WHERE major_area='ABRA' ORDER BY city asc";
                        $result = mysql_query($query) or die(mysql_error());
                        echo "<select name='categories' required>";
                        echo "<option value =''>Select City</option>";
                        while ($row = mysql_fetch_array($result)){
                          $city = $row['city'];
                          echo "<option value='$city'>$city</option>";
                        }

                        echo "</select>";

and of course the zip code. i havent done it yet, but i know how to query it. i just need to make it automatic but i dont know how.

all help would be appreciated, thank you in advance.

Here you can find a very easy to understand tutorial on how to do this.

First of all this is not something that you can do with strictly PHP. You need to refresh the page in order for the other dropdown to populate. From here, we draw the conclusion that you HAVE to use Ajax. Or JQuery .ajax() for that matter. Whatever you feel more comfortable using.

Here are the steps:

1. when the first dropdown gets selected you will have an onClick event on it, that will load a JS function

2. the JS function will have an AJAX call to a php file containing the code for the second dropdown. Of course, you will have to pass the province ID to the JS function and forward to the php file.

3. on the PHP file, you will have the select from DB with the proper information, selected, you guessed, based on the ID that you sent him. Useful for the WHERE clause, right?

4. the last PHP function displays the dropdown and there you go :)

Hope this helps! Read the documentation that I've provided, it WILL help you and keep in mind: You will not learn ANYTHING if you just ask for people on SO to provide you with the ready-code. The best thing you can do FOR YOU is to read the documentations so that the next time you encounter this issue, you will know how to solve it yourself, and not go back to SO to search for the answer or post a duplicate one ;)

Because you probably don't want to load all the city data up front (being that it's probably quite a bit of data), you would probably want some jS to do an AJAX call to populate the city dropdown on select of the province. Assuming you use jQ, something like:

function getCityOptions(province) {
    $.getJSON('/getcityjson', { 'province':province })
    .done(function(data) {
        // Update City select with new options here
    }
}

$('#province_select).change(function() {
    getCityOptions($('#province_select').val());
});

Not a complete example but should get you started.