Country-Region Dropdown Menu (Free)

FREE

A dropdown menu created with javascript that allows user to implement country-region dropdown list effortlessly. Country-Region Dropdown Menu is needed mostly in forms where the region field will get updated automatically when there is a change on the country field. It can be applied as easy as by entering the given required attributes into the country and region field respectively. Besides, user may also set the default value for each country and region field.

Attributes

Country field must be given a class name as gds-cr .
country-data-region-id is required in country field that contains the id of region field.
data-language is required in country field which use set the language used in both country and region data.
country-data-default-value is optional in country field which use to set the default selected country value, it supports both ISO3166-1 alpha-2 Country Code and country full name.
region-data-default-value is optional in region field which use set the default selected region value.

Multilingual Display Supported

It equipped with multiple languages for country and region name display. Please see the below of the supported languages.

Language code	Language Name
ar	Arabic	Demo
cs	Czech	Demo
da	Danish	Demo
de	German	Demo
en	English	Demo
es	Spanish	Demo
et	Estonian	Demo
fi	Finnish	Demo
fr	French	Demo
ga	Irish	Demo
it	Italian	Demo
ja	Japanese	Demo
ko	Korean	Demo
ms	Malay	Demo
nl	Dutch	Demo
pt	Portuguese	Demo
ru	Russian	Demo
sv	Swedish	Demo
tr	Turkish	Demo
vi	Vietnamese	Demo
zh-cn	Chinese Simplified	Demo
zh-tw	Chinese Traditional	Demo

Usage

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Country-Region DropDown Menu</title>

    <script src="assets/js/geodatasource-cr.min.js"></script>
    <link rel="gettext" type="application/x-po" href="languages/en/LC_MESSAGES/en.po" />
    <script type="text/javascript" src="assets/js/Gettext.js"></script>
  </head>
  <body>

    <div>
        Country: <select class="gds-cr" country-data-region-id="gds-cr-one" data-language="en"></select>

        Region: <select id="gds-cr-one"></select>
    </div>

    <div>
        Country: <select class="gds-cr" country-data-region-id="gds-cr-two" data-language="en" country-data-default-value="US"></select>

        Region: <select id="gds-cr-two" region-data-default-value="California"></select>
    </div>

  </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Country-Region DropDown Menu</title>

        <!-- link for jquery style -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

        <!-- link for bootstrap style -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <script src="assets/js/geodatasource-cr.min.js"></script>
        <link rel="stylesheet" href="assets/css/geodatasource-countryflag.css">
        <link href="https://fonts.googleapis.com/css?family=Strait|Chonburi" rel="stylesheet">

        <!-- link to eng language po file -->
        <link rel="gettext" type="application/x-po" href="languages/en/LC_MESSAGES/en.po" />
        <script type="text/javascript" src="assets/js/Gettext.js"></script>
        <style type="text/css">
            .ui-selectmenu-button.ui-button {
                width: 100%;
            }
            h2 {
                font-family: "Strait";
                font-size: 280%;
                font-weight: bold;
            }
            .ui-widget {
                font-family: courier;
            }
            .form-control {
                font-family: courier;
                font-size: 1em;
            }
            #display {
                display: block;
                text-align: center;
                font-size: 180%;
                font-family: "Chonburi", cursive;
                font-weight: normal;
            }
            #display-post {
                display: block;
                text-align: center;
                font-size: 180%;
                font-family: "Chonburi", cursive;
                font-weight: normal;
            }
            label {
                font-family: "Chonburi";
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#gds-cr-one").on("change",function() {
                    $("#display").html("You have selected " + $("#countrySelection").children("option").filter(":selected").text() + " > " + $(this).children("option").filter(":selected").text());
                    jQuery("#country_h").val($("#countrySelection").children("option").filter(":selected").text());
                    jQuery("#region_h").val($(this).children("option").filter(":selected").text());
                });
            });
        </script>
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center" style="margin-bottom:40px;">
                    <h2>COUNTRY-REGION DROPDOWN MENU</h2>
                </div>
                <div class="col-md-12">
<?php
$country = $region = "";
if (isset( $_POST["country_h"])) {
    $country = $_POST["country_h"];
    $region = $_POST["region_h"];
    echo "<div id="display-post"><p>You have selected: <br>
Country Name: " . $country . " <br>
Region Name: " . $region . " </p></div> ";
} else {
?>
                    <form class="form-horizontal" method="POST">
                        <p class="text-center lead text-info">Example: Country-Region DropDown Menu in PHP</p>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Country</label>
                            <div class="col-sm-10">
                                <select id="countrySelection" class="form-control gds-cr gds-countryflag" country-data-region-id="gds-cr-one" data-language="en"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="gds-cr-one" class="col-sm-2 control-label">Region</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="gds-cr-one"></select>
                            </div>
                        </div>
                        <div style="text-align:center">
                            <input type="hidden" name="country_h" id="country_h" value="<?php echo $country; ?>">
                            <input type="hidden" name="region_h" id="region_h" value="<?php echo $region; ?>">
                            <input type="submit" value="Submit">
                        </div>
                    </form>
                    <br>
                    <label id="display"></label>
<?php } ?>
                </div>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Country-Region DropDown Menu</title>

        <!-- link for jquery style -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

        <!-- link for bootstrap style -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <script src="assets/js/en_only/geodatasource-cr.min.js"></script>
        <script type="text/javascript" src="assets/js/Gettext.js"></script>
        <link rel="stylesheet" href="assets/css/geodatasource-countryflag.css">
        <link href="https://fonts.googleapis.com/css?family=Strait|Chonburi" rel="stylesheet">

        <style type="text/css">
            .ui-selectmenu-button.ui-button {
                width: 100%;
            }
            h2 {
                font-family: "Strait";
                font-size: 280%;
                font-weight: bold;
            }
            .ui-widget {
                font-family: courier;
            }
            .form-control {
                font-family: courier;
                font-size: 1em;
            }
            #display {
                display: block;
                text-align: center;
                font-size: 180%;
                font-family: "Chonburi", cursive;
                font-weight: normal;
            }
            #display-post {
                display: block;
                text-align: center;
                font-size: 180%;
                font-family: "Chonburi", cursive;
                font-weight: normal;
            }
            label {
                font-family: "Chonburi";
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#gds-cr-one").on("change",function() {
                    $("#display").html("You have selected " + $("#countrySelection").children("option").filter(":selected").text() + " > " + $(this).children("option").filter(":selected").text());
                    jQuery("#country_h").val($("#countrySelection").children("option").filter(":selected").text());
                    jQuery("#region_h").val($(this).children("option").filter(":selected").text());
                });
            });
        </script>
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center" style="margin-bottom:40px;">
                    <h2>COUNTRY-REGION DROPDOWN MENU</h2>
                </div>
                <div class="col-md-12">
                <%
                String country = request.getParameter("country_h");
                String region = request.getParameter("region_h");
                if (country != null && !country.trim().isEmpty()) {
                %>
                    <div id="display-post">
                        <p>
                            You have selected: <br>
                            Country Name: <% out.print(country); %> <br />
                            Region Name: <% out.print(region); %>
                        </p>
                    </div>
                <%
                } else {
                %>
                    <form class="form-horizontal" method="POST">
                        <p class="text-center lead text-info">Example: Country-Region DropDown Menu in Java</p>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Country</label>
                            <div class="col-sm-10">
                                <select id="countrySelection" class="form-control gds-cr gds-countryflag" country-data-region-id="gds-cr-one" ></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="gds-cr-one" class="col-sm-2 control-label">Region</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="gds-cr-one"></select>
                            </div>
                        </div>
                        <div style="text-align:center">
                            <input type="hidden" name="country_h" id="country_h" value="<% out.print(country); %>">
                            <input type="hidden" name="region_h" id="region_h" value="<% out.print(region); %>">
                            <input type="submit" value="Submit">
                        </div>
                    </form>
                    <br>
                    <label id="display"></label>
                <% } %>
                </div>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Country-Region DropDown Menu</title>

        <!-- link for jquery style -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

        <!-- link for bootstrap style -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <script src="assets/js/en_only/geodatasource-cr.min.js"></script>
        <script type="text/javascript" src="assets/js/Gettext.js"></script>
        <link rel="stylesheet" href="~/Assets/css/geodatasource-countryflag.css">
        <link href="https://fonts.googleapis.com/css?family=Strait|Chonburi" rel="stylesheet">

        <style type="text/css">
            .ui-selectmenu-button.ui-button {
                width: 100%;
            }

            h2 {
                font-family: "Strait";
                font-size: 280%;
                font-weight: bold;
            }

            .ui-widget {
                font-family: courier;
            }

            .form-control {
                font-family: courier;
                font-size: 1em;
            }

            #display {
                display: block;
                text-align: center;
                font-size: 180%;
                font-family: "Chonburi", cursive;
                font-weight: normal;
            }

            #display-post {
                display: block;
                text-align: center;
                font-size: 180%;
                font-family: "Chonburi", cursive;
                font-weight: normal;
            }

            label {
                font-family: "Chonburi";
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function () {
                $("#gds-cr-one").on("change", function () {
                    $("#display").html("You have selected " + $("#countrySelection").children("option").filter(":selected").text() + " > " + $(this).children("option").filter(":selected").text());
                    jQuery("#country_h").val($("#countrySelection").children("option").filter(":selected").text());
                    jQuery("#region_h").val($(this).children("option").filter(":selected").text());
                });
            });
        </script>
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center" style="margin-bottom:40px;">
                    <h2>COUNTRY-REGION DROPDOWN MENU</h2>
                </div>
                <div class="col-md-12">
                    @{
                        if (IsPost)
                        {
                            string country = Request["country_h"];
                            string region = Request["region_h"];
                            <div id="display-post">
                                <p>
                                    You have selected: <br>
                                    Country Name: @country <br />
                                    Region Name: @region
                                </p>
                            </div>
                        }
                        else
                        {
                            <form class="form-horizontal" method="POST">
                                <p class="text-center lead text-info">Example: Country-Region DropDown Menu in ASP</p>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Country</label>
                                    <div class="col-sm-10">
                                        <select id="countrySelection" class="form-control gds-cr gds-countryflag" country-data-region-id="gds-cr-one" data-language="en"></select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="gds-cr-one" class="col-sm-2 control-label">Region</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" id="gds-cr-one"></select>
                                    </div>
                                </div>
                                <div style="text-align:center">
                                    <input type="hidden" name="country_h" id="country_h" value="">
                                    <input type="hidden" name="region_h" id="region_h" value="">
                                    <input type="submit" value="Submit">
                                </div>
                            </form>
                            <br>
                            <label id="display"></label>
                        }
                    }
                </div>
            </div>
        </div>
    </body>
</html>

Country Flag Designs

The Country Flag is designed from IP2Location™ Country Flags https://www.ip2location.com/free/country-flags

Square Country Flag

<link rel="stylesheet" href="assets/css/geodatasource-countryflag.css">

Round Country Flag

<link rel="stylesheet" href="assets/css/geodatasource-countryflag-round.css">

Bended Square Flag

<link rel="stylesheet" href="assets/css/geodatasource-countryflag-square-bended.css">

Rounded Square Flag

<link rel="stylesheet" href="assets/css/geodatasource-countryflag-square-rounded.css">

Shadow Square Flag

<link rel="stylesheet" href="assets/css/geodatasource-countryflag-square-shadow.css">