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.

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.

Read more ( with video tutorial ) 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>");
});

},"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.


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Christopher Astbury

    24-10-2016

    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
    smo1234

    25-10-2016

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

    10-05-2017

    how to edit drop down list like country state city in codeigniter
    Salah

    17-10-2017

    Great and useful, thank you. Would you please if it is working or not when selecting: India - Maharashtra (the first state) - Mumbai (Bombay) as a city?
    smo1234

    22-10-2017

    Not able to find any bug , but once it has not submitted the form. May be some issue with loading the options. Please try and let us know here if any issue is there.
    smo1234

    14-02-2019

    This line create the JSON string by taking output from the table. This string is used to populate options for the dropdown list. In you case you need the proper formatting the output which can be read by your listboxes.

    This is in the sequence of 'column_name'=>$column_value ....... Try to match this format.
    Larry

    25-02-2019

    Do you have an example of how to populate an addition pull-down with Zip Code with the list determined by City? I have worked for days on this and cannot get it working - not a JavaScript guy.

    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer