Country and State Dropdown List HTML & JS Topic is solved
-
- 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
i want latest list of country and state dropdown select list of form for my website in HTML and Javascript.
-
- 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
You can find the solution in the attachment below and follow HTML example from file "example-default.html".
Usage:
Bootstrap Usage:
If you are using Twitter Bootstrap, you may refer to the below example for the implementation.
Node.js Usage:
The following steps show how to use the dropdown menu in Express Web Framework:
Credit:
For full details and instructions visit
https://github.com/geodatasource/countr ... pdown-menu
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>
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>
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

For full details and instructions visit
https://github.com/geodatasource/countr ... pdown-menu
- Attachments
-
- country-region-dropdown-menu-master.zip
- (715.83 KiB) Downloaded 5763 times