How to populate state dropdown based on option selected in country dropdown using jQuery

Populating the state or city dropdown based on the value of option selected by the user in country dropdown is a very common implementation of ajax feature that you have seen on many websites while filling the online form.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populate state dropdown based on option selected in country dropdown using jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "get_state.php",
            data: { country : selectedCountry } 
        }).done(function(data){
            $("#response").html(data);
        });
    });
});
</script>
</head>
<body>
<form>
    <table>
        <tr>
            <td>
                <label>Country:</label>
                <select class="country">
                    <option>Select</option>
                    <option value="usa">United States</option>
                    <option value="india">India</option>
                    <option value="uk">United Kingdom</option>
                </select>
            </td>
            <td id="response">
                <!--Response will be inserted here-->
            </td>
        </tr>
    </table>
</form>
</body> 
</html>

The jQuery script above send the value of option selected in the country dropdown to the server. The “get_state.php” file on the server then process the request, if the request succeeds the jQuery script receives the returned data and creates the city dropdown list.

The PHP code inside “get_state.php” will look something like this:

<?php

if(isset($_POST["country"])){

    // Capture selected country

    $country = $_POST["country"];

     

    // Define country and city array

    $countryArr = array(

                    "usa" => array("New Yourk", "Los Angeles", "California"),

                    "india" => array("Mumbai", "New Delhi", "Bangalore"),

                    "uk" => array("London", "Manchester", "Liverpool")

                );

     

    // Display city dropdown based on country name

    if($country !== 'Select'){

        echo "<label>City:</label>";

        echo "<select>";

        foreach($countryArr[$country] as $value){

            echo "<option>". $value . "</option>";

        }

        echo "</select>";

    } 

}

View Demo