LaravelCode

Search

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

jQuery
4342 views 4 years ago
post-title

Use the jQuery ajax() method

Populating the state or city dropdown based on the value of option selected by the user in the country dropdown is a very common implementation of Ajax feature that you have seen on many websites while filling the registration form. You can do this easily through the jQuery ajax() method along with the little help of any server side scripting language like PHP.

Let's take a look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Populate City Dropdown Using jQuery Ajax</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "process-request.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 "process-request.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 the "process-request.php" file 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>";
    } 
}

 

Random Articles
Advertise