Three Linked Dropdown Lists

Build three linked dropdowns such as Country → State → City. Each parent selection clears and reloads the next level.

Country to State Top ↑

$( "#country" ).on(
    "change",
    function () {
        loadStates(
            $( this ).val()
        );
    }
);

function loadStates( countryCode ) {
    const $state =
        $( "#state" )
            .empty()
            .prop( "disabled", true );

    $( "#city" )
        .empty()
        .prop( "disabled", true );

    if ( !countryCode ) {
        return;
    }

    $.getJSON(
        "states.php",
        { country: countryCode }
    ).done(function ( rows ) {
        $.each(
            rows,
            function ( index, row ) {
                $( "<option>", {
                    value: row.id,
                    text: row.name
                }).appendTo( $state );
            }
        );

        $state.prop(
            "disabled",
            false
        );
    });
}

State to City Top ↑

$( "#state" ).on(
    "change",
    function () {
        $.getJSON(
            "cities.php",
            {
                state_id:
                    $( this ).val()
            }
        ).done(function ( rows ) {
            const $city =
                $( "#city" ).empty();

            $.each(
                rows,
                function ( index, row ) {
                    $( "<option>", {
                        value: row.id,
                        text: row.name
                    }).appendTo( $city );
                }
            );

            $city.prop(
                "disabled",
                false
            );
        });
    }
);

Demos and Download Top ↑

Demo: three linked dropdowns →

• Australia preselected
• United Kingdom preselected
• India preselected

Download three-dropdown project

Admin pages for Country/State/City data →

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

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

Original example 2

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

Original example 3

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

Original example 4

$("#city_id").change(function(){ // change function of listbox
if($('#city_id').val()>1){
$("#b1").prop('disabled',false);
}
});

Original example 5

////City box on Change/////////////////
$("#city_id").change(function(){ // change function of listbox
if($('#city_id').val()>1){
$('#f1').attr('action', "dropdown3-ck.php").submit();
}
});

Additional Original Learning Routes Top ↑

• ../forum/topic.php?topic_id=3646
• ../php_tutorial/json_data-formatting.php
• ../php_tutorial/php_mysql_single-record.php
• ../templates/custom.css
• dropdown-list-double.php
• http-post.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: