Three linked dropdown listbox using JQuery, PHP, JSON
One easy example to understand the requirement is linkage between Country , State and City. We will have three tables, one is country table storing country name and country code. Second one is State table storing state name and state_id ( unique id of each state ) and country code saying which country this state is belong. Same way we have third table showing city name and city id along with state id to link State name to City. You can download the script at end of this page.
Table StructuresThere are three tables to store Country, State and City records.
This script has one main page to display three dropdown list with a button to submit the form to another page. User can select a country first, then select a state and then select City. After selecting country the available state in the selected country will be displayed as options in the second dropdown list. Same way after selection of state the available cities of the state will be displayed as options for the user to select.
After selection of all three list boxes, the submit button will be enabled to submit the form.
How the script works.This script works by using PHP script at backend and using JQuery for various control at client side. Records are kept in database table.
Populating Country listboxWe will first populate the country list while loading the page. This part is PHP script only and it populates the list by taking records from database table.
Populating state listOnce one country is selected by user , it will trigger change function of drop down box. Inside the change function we will first remove the available options. We will ensure that submit button is disabled as we have not selected city option yet.
Then we will pass the country_code value of the selection to backend script dropdown3ck.php using POST method. This backend script will use the country_code to get matching state name and state_id from 2nd table ( plus2_state). The list of state_id and state name will be returned through JSON string.
Above code will add options to state list based on the selection of country by user. After this once the user select a state, the process starts again by triggering on change event of state dropdown list.
Populating City listOnce the user select a state the onchange event associated with state dropdown list triggers.
In the above code we have passed state_id to backend PHP script dropdown3ck.php and collected the list of cities from the table plus2_city.
Selection of CityOnce the user select a city , we enable the submit button to Submit the form data to next page.
We can modify above lines and add auto submit of form on selection of third drop down list box. Change in code is here. You can remove the button if required.
Displaying more details after 3rd drop down is selected.You can collect city_id after selection of 3rd list box. Using this ID you can collect data from another table and show to the users. It is explained here how to populate three dropdown list by interlinking them, however adding or deleting options to these drop down list boxes is also part of the site admin function. We can add county or State or City to the table by using the same interlinking. This part is explained in next section.