Three interlinked dropdown listbox showing Country State and city by using MySQL records with PHP Script and JQuery

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.

plus2_country

plus2_state

plus2_city

country_code

state_id

city_id

country

state

city

country_code

state_id

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.

$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>");
});

},"json");
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(return_data.city, function(key,value){
$("#city_id").append("<option value=" + value.city_id +">"+value.city+"</option>");
});

},"json");
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
if($('#city_id').val()>1){
$("#b1").prop('disabled',false);
}
});

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
if($('#city_id').val()>1){
$('#f1').attr('action', "dropdown3-ck.php").submit();
}
});

Selecting one options by default or on page load

We may think on keeping one country selected by default or while loading of the page. User then can change the selection to any other country. To trigger the change event to show state options for Canada in second dropdown we have to trigger the change event of first dropdown list.

$(document).ready(function() {
//To select Canada as default country 
$("#country_code").val('CAN');
$(function () {
//Trigger the change event to show state options of Canada
$("#country_code").change();
});
.....
.....

You can receive the country name from address bar and then keep that country as selected from the first list. Click the country names from the list below.

You can visit Australia  or England  to watch Cricket. 
This game is popular in India.

if($('#sel_country').val().length > 0){
$("#country_code").val($('#sel_country').val());
$(function () {
$("#country_code").change();
});
}

Inside PHP script we can collect the country code from query string and set the hidden html tag with the country code value.

$country_sel=$_GET['country'];

Collected country code from query string ( address bar )

<input type=hidden name=sel_country 
id=sel_country value='$country_sel'>

Above line should go inside the form

Check the forum to know more on three dorpdown list issues.

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.

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Three linked dropdown listbox using JQuery, PHP, JSON