• 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>
Country Flag Designs

  • Square Country Flag with
    <link rel="stylesheet" href="assets/css/geodatasource-countryflag.css">
    Square Country Flag
  • Round Country Flag with
    <link rel="stylesheet" href="assets/css/geodatasource-countryflag-round.css">
    Round Country Flag
  • Marker Country Flag with
    <link rel="stylesheet" href="assets/css/geodatasource-countryflag-marker.css">
    Marker Country Flag