How to make dependable selects dynamically using a mysql DB, PHP and jQuery

Question

I have three selects representing states, cities and banks.

You can see a proof of concept in this jsfiddle

So when the user selects an State, the link changes (via jQuery) and it goes to the list of all the states.

If the user selects a State and a City, the link changes again and it goes to the list of all cities in that state.

And if the user selects also the bank, the link changes to the list of all the offices in that State, City and Bank.

This data comes from two schemas simplified like this:

mysql> describe office;
+-------+----------+------+-----+---------+-------+
| Field | Type     | Null | Key | Default | Extra |
+-------+----------+------+-----+---------+-------+
| id    | int(11)  | YES  |     | NULL    |       |
| gid   | int(11)  | YES  |     | NULL    |       |
| name  | longtext | YES  |     | NULL    |       |
+-------+----------+------+-----+---------+-------+

mysql> describe geo;
+-------+--------------+------+-----+---------+-------+
| Field | Type         | Null | Key | Default | Extra |
+-------+--------------+------+-----+---------+-------+
| gid   | int(11)      | NO   |     | 0       |       |
| name  | varchar(255) | NO   |     |         |       |
| slug  | varchar(255) | NO   |     |         |       |
+-------+--------------+------+-----+---------+-------+

I can load the first select with the data about the states with php doing something like this:

<?php
$result = db_query('select * from ptm_geo where level = 1;');
while ($node = db_fetch_object($result)) {
    $states .= "<option value='$node->slug'>$node->name</option>\n";
}
?>
<select id="state">
  <option value=''>Estado</option>
  <?php echo $states ?>
</select>

But I don't know exactly how to make the cities and the banks being loaded from the database and also being dependant.

Meaning, if you select a state, only the cities from that state should be loaded from the database.

Or if a state and a city are selected, only the banks from that state and city should be loaded.

Can any one point me out in the right direction on how to approach this?

Answer 1

<script>
    function updateCitiesSelectOptions(state) {
    // Perform a request to your php an return in your case the html
    // is also common to return just an array with the elements 
    // and print the html with javascript

        // https://api.jquery.com/jQuery.get/
        $.get( '/path/to/script/returning/the/html', { state: state }
        .done(function( data ) {
            // here the cities selector is updated
            $("#cities").html(data);
        });
    }

    function updateBanksSelectOptions(city) {
        $.get( '/path/to/script/returning/the/html', { city: city }
        .done(function( data ) {
            // here the banks selector is updated
            $("#banks").html(data);
        });
    }

    // Bind the functions to the change events of the selectors.
    $("#state").bind("change",function(){
        updateCitiesSelectOptions($(this).val());
    });

    $("#cities").bind("change",function(){
        // If you need the state for the query send it here also
        updateBanksSelectOptions($(this).val());
    });
</script>

<?php
    // You will receive the state and the city in $_GET variable as we are performing a
    // $.get javascript call

    // Escape the input preventing MySQL injections
    // Note that the method is deprecated and consider to update your database access
    // http://php.net/manual/es/function.mysql-real-escape-string.php  
    $state = mysql_real_escape_string($_GET["state"]);
    $result = db_query("select * from table where state = $state");
    while ($node = db_fetch_object($result)) {
        echo "<option value='$node->slug'>$node->name</option>\n";
    }
?>

// You will need different scripts to return the html or only one being parameterized. 

// i.e. 
// Data sent via javascript
{ action: "cities", state: state }

// Data sent via javascript
{ action: "banks", cities: state }

<?php 
    if ($_GET['action'] == "cities") 
        // Return cities <options> 
    if ($_GET['action'] == "banks") 
        // Return bank <options> 
?>