Three linked dropdown listbox using JQuery, PHP, JSON

Three inter-linked Drop down listbox

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 Structures

There 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 listbox

We 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.

Read more on how to populate dropdown list box by using data from a table

$sql="select * from plus2_country";

echo "<select class='form-control' id=country_code name=country_code>
<option value=''>Select Country</option>";
foreach ($dbo->query($sql) as $row) {
echo "<option value=$row[country_code] >$row[country]</option>";
echo "</select>";

Populating state list

Once 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.
$("#country_code").change(function(){ // change function of listbox
$("#state_id,#city_id").empty();// Remove the existing options 
$("#b1").prop('disabled',true); // Disable submit button
$("#msg").html('Just Wait ...'); // Message 
$("#msg").show(); // Display Message

$.post( "dropdown3ck.php", {"country_code":$('#country_code').val()},function(return_data,status){
$("#state_id").append("<option value=''>Select State</option>");

$.each(return_data.state, function(key,value){
$("#state_id").append("<option value=" + value.state_id +">"+value.state_id + ':' + value.state+"</option>");

setTimeout(function() { $("#msg").hide(); }, 2000);
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 list

Once the user select a state the onchange event associated with state dropdown list triggers.
$("#state_id").change(function(){ // change function of listbox
$("#city_id").empty(); 	// Removes all options
$("#b1").prop('disabled',true);   // submit button is disabled
$("#msg").html('Just Wait ...'); // Message 
$("#msg").show();   // Display message 

$.post( "dropdown3ck.php", {"state_id":$('#state_id').val()},function(return_data,status){

$("#city_id").append("<option value=''>Select City</option>");
$.each(, function(key,value){
$("#city_id").append("<option value=" + value.city_id +">""</option>");

setTimeout(function() { $("#msg").hide(); }, 2000);
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 City

Once the user select a city , we enable the submit button to Submit the form data to next page.
$("#city_id").change(function(){ // change function of listbox
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.
////City box on Change/////////////////
$("#city_id").change(function(){ // change function of listbox
$('#f1').attr('action', "dropdown3-ck.php").submit();

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.

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Visitors Rating
Your Rating

Christopher Astbury


Hi, top website with spot on examples, how can I when I press submit get the actual values selected, eg country name, city, state, and not the ID's please


In the select list box you can use value option as name of the item in place of id. That will display the value. You can also read the name part of the select item.

Post Comment This is for short comments only. Use the forum for more discussions.

Subscribe to our mailing list

* indicates required
Subscribe to plus2net

Most Popular JQuery Scripts


Two dependant list boxes


Calendar with Date Selection


Data change by Slider


Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 All rights reserved worldwide Privacy Policy Disclaimer