• Your shopping cart is empty!
GeoDataSource Javascript Library

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
arArabicDemo
csCzechDemo
daDanishDemo
deGermanDemo
enEnglishDemo
esSpanishDemo
etEstonianDemo
fiFinnishDemo
frFrenchDemo
gaIrishDemo
itItalianDemo
jaJapaneseDemo
koKoreanDemo
msMalayDemo
nlDutchDemo
ptPortugueseDemo
ruRussianDemo
svSwedishDemo
trTurkishDemo
viVietnameseDemo
zh-cnChinese SimplifiedDemo
zh-twChinese TraditionalDemo
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">
Square Country Flag

Round Country Flag

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

Bended Square Flag

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

Rounded Square Flag

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

Shadow Square Flag

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