country-region-dropdown-menu

v2.5.1

Published

5 months ago

A dropdown menu created with javascript that allows user to implement country-region dropdown list effortlessly.

Downloads

172

0High
0Medium
0Low

geodatasource

geodatasource country region dropdown menu selector

Country-Region DropDown Menu

This javascript enables you to implement a country-region dropdown menu with ease. It is just as simple as to enter 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 repopluated upon the selection of country name.

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

Total of 247 country name 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

This plugin 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|

City DropDown Supported

Please take a look on How to add City DropDown to Country-Region DropDown Menu tutorial to learn more about how City DropDown added.

Plugins

Support amCharts Map Display.
Support D3 and World Atlas TopoJSON Display.

Demo

Please check on demo page to have a clearer picture about how it works.

Demo on JSFiddle

Please try out the demo on JSFiddle page.

CDN of Libraries

Usage

    <html>
      <head>
        <meta charset="UTF-8">

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

        <script src="assets/js/geodatasource-cr.min.js"></script>
        <link rel="stylesheet" href="assets/css/geodatasource-countryflag.css">

        <!-- link for semantic-ui style -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" />

        <!-- link to languages po files -->
        <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>

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

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

        <div>
            Country: <div class="ui fluid search selection dropdown gds-cr-semantic" country-data-region-id="gds-cr-four" data-language="en"></div>

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

        <div>
            Country: <input class="gds-cr-autocomplete" country-data-region-id="gds-cr-five" data-language="en">

            Region: <input class="gds-cr-five-autocomplete" id="gds-cr-five">
        </div>

        <div>
            Country: <select class="gds-cr" country-data-region-id="gds-cr-six" data-language="en" country-include="US,GB,DE,FR,IT,NL"></select>

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

      </body>
    </html>

Bootstrap with cdnjs Usage

If you are using Twitter Bootstrap with cdnjs, you may refer to the below example for the implementation.

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

        <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="https://cdnjs.cloudflare.com/ajax/libs/country-region-dropdown-menu/2.5.1/js/geodatasource-cr.min.js"></script>
        <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" type="text/javascript"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/country-region-dropdown-menu/2.5.1/css/geodatasource-countryflag.min.css">

        <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 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">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Country</label>
                            <div class="col-sm-10">
                                <select class="form-control gds-cr gds-countryflag" country-data-region-id="gds-cr-1" data-language="en"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="gds-cr-1" class="col-sm-2 control-label">Region</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="gds-cr-1"></select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
    </html>

Node.js Usage

The following steps show how to use the dropdown menu in Express Web Framework:

Install the module by npm install country-region-dropdown-menu
Copy geodatasource-cr.min.js script and Gettext.js script to /public/javascripts/ directory.
Copy geodatasource-countryflag.css stylesheet to /public/stylesheets/ directory.
Copy geodatasource-countryflag.png image to /public/img/ directory.
Copy languages folder to /public/ directory.
Include the script in the jade file by script(src='/javascripts/geodatasource-cr.min.js')
Include the script in the jade file by script(src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"))
Include the script in the jade file by script(src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js")
Include the link in the jade file by link(rel='stylesheet' href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css")
Include the link in the jade file by link(rel='stylesheet' href='stylesheets/geodatasource-countryflag.css')
Include the link in the jade file by link(rel='gettext' type='application/x-po' href='languages/en/LC_MESSAGES/en.po')
Include the script in the jade file by script(src='/javascripts/Gettext.js')
Code for implementation:

    |Country:
    select.gds-cr(country-data-region-id="gds-cr-one",data-language="en").gds-countryflag
    |Region:
    select#gds-cr-one

React Usage

The following steps show how to use the dropdown menu in React:

Install the module by npm install country-region-dropdown-menu
Import the React component by import {CountryRegionDropdown} from 'country-region-dropdown-menu';
Code for implementation:

    <CountryRegionDropdown />

Attributes

Country field must be given a class name as gds-cr whereas gds-cr-semantic for country field that using Semantic-UI whereas gds-cr-autocomplete for country field that using autocomplete input option.
gds-countryflag can be added to class name of country field to support country flag.
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. Refer to multilingual section for language code supported.
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.
country-include is optional in country field which use to set country dropdown with the specific countries, for example country-include="US,GB,DE,FR,IT,NL"
country-exclude is optional in country field which use to exclude the specific countries from the country dropdown , for example country-exclude="US,GB,DE,FR,IT,NL"
region-data-default-value is optional in region field which use set the default selected region value.

Country Flag Designs

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

Square Country Flag with <link rel="stylesheet" href="assets/css/geodatasource-countryflag.css">
Round Country Flag with <link rel="stylesheet" href="assets/css/geodatasource-countryflag-round.css">
Bended Square Country Flag with <link rel="stylesheet" href="assets/css/geodatasource-countryflag-square-bended.css">
Rounded Square Country Flag with <link rel="stylesheet" href="assets/css/geodatasource-countryflag-square-rounded.css">
Shadow Square Country Flag with <link rel="stylesheet" href="assets/css/geodatasource-countryflag-square-shadow.css">
Flag logo Country Flag with <link rel="stylesheet" href="assets/css/geodatasource-countryflag-flag.css">