Country and State Dropdown List HTML & JS Topic is solved

HTML, PHP, CSS, Javascript, AJAX.............
sudheer1994
Posts: 4
Joined: Tue Jan 15, 2019 3:30 pm
Location: Hyderabad
Mood:
Has thanked: 7 times
Age: 29

Country and State Dropdown List HTML & JS

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
Posts: 8
Joined: Tue Jan 15, 2019 1:23 pm
Has thanked: 2 times
Been thanked: 7 times

Re: Country and State Dropdown List HTML & JS

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:

Code: Select all

<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: :ugeek:
For full details and instructions visit
https://github.com/geodatasource/countr ... pdown-menu
Attachments
country-region-dropdown-menu-master.zip
(715.83 KiB) Downloaded 1302 times

Post Reply Previous topicNext topic