What is Country Region Dropdown Menu

Country Region Dropdown Menu

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

GeoDataSource Country Region Dropdown Menu is just as simple as adding the pre-defined class name and attribute into the dropdown control (HTML select input box) to make them work. After that, the region dropdown will be automatically repopulated upon the selection of a country name.

This dropdown menu uses the ISO defined name for the display, namely ISO3166-1 (for Country Name) and ISO3166-2 (for Region Name).

  • Total of 247 country names are supported (except Bouvet Island and Heard Island and McDonald Islands, which have no region/subdivision defined)
  • Please visit ISO3166-2 Subdivision Code to learn more about the ISO3166-2 supported.

Multilingual Display Supported

In addition, GeoDataSource Country Region Dropdown Menu comes equipped with multiple languages for country and region name display. Please see the below of the supported languages.

Language codeLanguage 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

Attributes

Below are the attributes needed by GeoDataSource Country Region Dropdown Menu in order to display the dropdown menu.

  • Country field must use the class name gds-cr OR gds-cr-semantic for country field that is using Semantic-UI OR gds-cr-autocomplete for the country field that is using the autocomplete input option.
  • gds-countryflag can be added to the class name of the country field to support country flag.
  • country-data-region-id is required in the country field that stores the id of the region field.
  • data-language is required in the country field which is used to set the display language in both country and region data.
  • country-data-default-value is optional in the country field which is used 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 the region field which is used to set the default selected region value.

Sample code

The sample code of GeoDataSource Country Region Dropdown Menu is as follow.

<!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>

For more details about the GeoDataSource Country Region Dropdown Menu, you can visit https://www.geodatasource.com/software/country-region-dropdown-menu to learn more about the information provided.

Was this article helpful?

Yes No

Related Articles