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

I have the choice to represent three states, cities and banks.

You can see the proof of concept in it

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

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

And if the user also selects the bank, the link changes to that state, city and list of all offices.

This data is simplified by two schemas in this way:

  mysql> Office description; + ------- + ---------- + ------ + ----- + --------- + ------- + | Field | Type | Faucet Key | Default | Extra | + ------- + ---------- + ------ + ----- + --------- + ------- + | ID | Int (11) | Yes. | Faucet | | GID | Int (11) | Yes. | Faucet | | Name | Long text | Yes. | Faucet | + ------- + ---------- + ------ + ----- + --------- + ------- + Mysql & gt; Description of land; + ------- + -------------- + ------ + ----- + --------- + --- ---- + | Field | Type | Faucet Key | Default | Extra | + ------- + -------------- + ------ + ----- + --------- + --- ---- + | GID | Int (11) | No | | 0 | | | Name | Varchar (255) | No | | | | | Slug | Varchar (255) | No | | | | + ------- + -------------- + ------ + ----- + --------- + --- ---- +  

I can load the first selection with state data with php:

  & lt; Php $ result = db_query (choose from 'ptm_geo * where level = 1;'); ($ Node = db_fetch_object ($ result)) {$ states. = "& Lt; option value = '$ node- & gt; slug' & gt; $ node- & gt; name & lt; / option & gt; \ n"; }? & Gt; & Lt; Select ID = "State" & gt; & Lt; Option value = '' & gt; Estado & lt; / Options & gt; & Lt ;? Php $ states? & Gt; & Lt; / Select & gt;  

But I do not know how cities and banks are being loaded from the database and also depend on them.

Meaning, if you choose a state

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

Can anyone tell me in the right direction how this approach is?

  & lt; Script & gt; Function updateCitiesSelectOptions (state) {// In your case, make a request for your PHP return, it is also common to return an array with html / / // elements and javascript // https: // with api Print the html. Jquery.com/jQuery.get/ $ .get ('/ path / to / script / return / the / html', {state: state} .done (function (data) {// here city selector $ has been updated "#city"). Html (data);}) Function UpdateBankedConfiguration Option (city) {$ .get ('/ path / to / script / return / the / html', {city: city} .done (function ) {// Here the bank selector is updated $ ("#Bank"). Html (data);}) //} Force the actions for change events of selectors. $ ("# State") Bind ("change", function () (updateCitiesSelect option ($ (this) .val ());}); $ ("# cities"). If you need the query send it al here, please update the bank option ($ (this) .val ());}); & lt; / scripts & gt; & lt; ; Php // You will receive state and city in the $ _GET variable as we are doing a // $ Get the Javascript call // Avoid preventing the input of MySQL injection / note that the method has been deprecated and To update it, consider using your database Access // http: //php.n Et / manual / es / function.mysql-real-escape-string.php $ state = mysql_real_escape_string ($ _GET ["state"]); $ Result = db_query ("Select from table * where state = $ state"); {$ Node = db_fetch_object ($ result)) {resonance "& lt; option value = '$ node- & gt; slug'> nod-> name & lt; / option & gt; \ n" ; }? & Gt; // You will need different scripts to return HTML or only one parameter will be // ie // data / data sent via javascript: javascript {Action: "bank", cities: state} & Lt ;? Php if (data sent through $ _GET ['action'] {action: "cities", state: state} // == "cities") // return cities & lt; Options & gt; If ($ _GET ['action'] == "bank") // return bank