Country and State Dropdown List HTML & JS

sudheer1994 · Post by **sudheer1994** » Tue Jan 15, 2019 4:27 pm

i want latest list of country and state dropdown select list of form for my website in HTML and Javascript.

cuehosting · Post by **cuehosting** » Fri Jan 18, 2019 8:58 pm

You can find the solution in the attachment below and follow HTML example from file "example-default.html".

Usage:

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

    <!-- link for jquery style -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/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 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>

  </body>
</html>

Bootstrap Usage:

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

Code: Select all

<!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="assets/js/geodatasource-cr.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/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">
    <link rel="stylesheet" href="assets/css/geodatasource-countryflag.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="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/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:

Code: Select all

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

Credit:

For full details and instructions visit
https://github.com/geodatasource/countr ... pdown-menu

Forum

Country and State Dropdown List HTML & JS Topic is solved

Country and State Dropdown List HTML & JS

Re: Country and State Dropdown List HTML & JS

Login with your social network account

Country and State Dropdown List HTML & JS Topic is solved

Country and State Dropdown List HTML & JS

Re: Country and State Dropdown List HTML & JS