html 和 javascript 中的国家/地区下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6659809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Country state/city dropdown in html and javascript
提问by Muhammad Hasan Khan
Is there any readily available snippet that has all the countries, states and cities for showing in a drop down in html for selection?
是否有任何现成的片段包含所有国家、州和城市，可在 html 下拉列表中显示以供选择？
What is standard for this? Does everyone roll their own?
这是什么标准？每个人都自己滚吗？
The snippet can be in html, javascript, jquery plugin.
该片段可以在 html、javascript、jquery 插件中。
NOTE: I know how to make chained dropdown. I'm more concerned with the data rather than technique.
注意：我知道如何制作链式下拉菜单。我更关心数据而不是技术。
采纳答案by mplungjan
Here is the data for free - Good luck getting 33MB presented in a drop down ;)
这是免费的数据 - 祝你好运在下拉列表中显示 33MB ;)
Seems they also have a JavaScript API- (found via Best way to get user nearest city? Python/Django) to start you off with the user's (IP) location
似乎他们也有一个JavaScript API- （通过最佳方式找到用户最近的城市？Python/Django）来开始你的用户（IP）位置
In the foreseeable future there may be a JSON interface according to Peter Saczkowski Operations Manager | Maxmind, Inc.:
据 Peter Saczkowski 运营经理称，在可预见的未来可能会有一个 JSON 接口 | Maxmind, Inc.:
Yes, we are actually considering switching over to JSON, but don't have a timeline quite on when that will happen. If/when this happens, we'll have updates in our newsletter and on the site.
是的，我们实际上正在考虑切换到 JSON，但没有关于何时发生的时间表。如果/当发生这种情况时，我们将在时事通讯和网站上更新。
DisclaimerI'm not affiliated with MaxMind and the themselves suggest to also look at GeoNames
免责声明我不隶属于 MaxMind，他们自己建议也看看GeoNames
MaxMind World Cities with PopulationLast Updated: May 17th, 2011
MaxMind 世界人口城市最近更新时间：2011 年 5 月 17 日
Product Summary: Includes city, region, country, latitude and longitude. This product doesn't contain any IP addresses. It's simply a listing of all the cities in the world. For IP to city mappings, see our MaxMind City product.
Note that this product is now a free download [33 MB]. The database will be updated about once per year, since the city data doesn't change that frequently. [license]
The database uses toponymic information, based on the Geographic Names Data Base, containing official standard names approved by the United States Board on Geographic Names and maintained by the National Geospatial-Intelligence Agency. More information is available at the Maps and Geodata link at www.nga.mil. The National Geospatial-Intelligence Agency name, initials, and seal are protected by 10 United States Code Section 445.
It also uses free population data ? by Stefan Helders www.world-gazetteer.com. Visit his website to download the free population data. Our database combines Stefan's population data with the list of all cities in the world.
Another free cities database is available from GeoNames.
产品概要：包括城市、地区、国家、纬度和经度。本产品不包含任何 IP 地址。它只是世界上所有城市的列表。有关 IP 到城市的映射，请参阅我们的 MaxMind City 产品。
请注意，该产品现在可以免费下载 [33 MB]。该数据库大约每年更新一次，因为城市数据不会经常更改。[执照]
该数据库使用基于地名数据库的地名信息，其中包含美国地名委员会批准并由国家地理空间情报局维护的官方标准名称。如需更多信息，请访问 www.nga.mil 的地图和地理数据链接。国家地理空间情报局的名称、首字母缩写和印章受美国法典第 10 条第 445 条的保护。
它还使用免费的人口数据？作者：Stefan Helders www.world-gazetteer.com。访问他的网站下载免费的人口数据。我们的数据库结合了 Stefan 的人口数据和世界上所有城市的列表。
GeoNames 提供了另一个免费的城市数据库。
Product Features - MaxMind World Cities with Population
产品特点 - MaxMind 世界人口城市
Includes the following fields:
Country Code
ASCII City Name
City Name
State/Region
Population
Latitude
Longitude
Timezone data is available through an external lookup
Approximately 2,710,000 records.
Database Fields
Field Data Type Field Description
Country Code char(2) ISO 3166 Country Code,
ASCII City Name varchar(100) Name of city or town in ASCII encoding
City Name varchar(255) Name of city or town in ISO-8859-1 encoding. A list of cities contained in GeoIP City is available.
State/Region char(2) For US, ISO-3166-2 code for the state/province name. Outside of the US, FIPS 10-4 code
Population unsigned int Population of city (available for over 33,000 major cities only)
Latitude numeric (float) Latitude of city where IP is located
Longitude numeric (float) Longitude of city where IP is located
回答by Brad Mace
Any code containing all that data would be a lot more than a snippet. I don't think you'll find a standard component for this, and I wouldn't trust any I found that claim to. There's too much subjectivity along with making your own judgements about how comprehensive you want to be.
任何包含所有这些数据的代码都不仅仅是一个片段。我认为您不会为此找到标准组件，而且我不会相信我发现的任何声明。有太多的主观性以及对你想要的全面程度做出自己的判断。
- This sort of data changesconstantlyand in many cases isn't universally agreed upon. I see you're from Pakistan; under which country should Kashmir be listed? See also: Burma(or do I mean Myanmar?)
- Not everything fits neatly into city/state/country classes. Should Puerto Rico be listed as a country or a US state? Then you've got Crown Dependencies, Outlying Territories, Protectorates, Self-governing Colonies, etc.
- Compiling a complete list of states (more generally Subnational entities, to include territories, districts, provinces, prefectures and lots more) and especially cities(do you really want to include Lost Springs, Wyoming, population :1?) would be quite an accomplishment. I'm not sure even the CIA World Factbookis that comprehensive.
- 这种数据不断变化，在许多情况下并没有得到普遍认同。我看你是巴基斯坦人；克什米尔应该被列入哪个国家？另见：缅甸（或者我的意思是缅甸？）
- 并非所有内容都适合城市/州/国家课程。波多黎各应该被列为一个国家还是一个美国州？然后你有皇家属地、边远领土、保护国、自治殖民地等。
- 编制一份完整的州列表（更普遍的是地方实体，包括领土、地区、省、县等等），尤其是城市（你真的想包括失落的斯普林斯、怀俄明州、人口：1？）将是一项巨大的成就. 我不确定甚至CIA World Factbook是否如此全面。
Some other good sources when rolling your own are
滚动自己的其他一些好的来源是
回答by mithunsatheesh
i too got into this same problem and here is some links that helped.
我也遇到了同样的问题，这里有一些有用的链接。
http://www.javascriptsource.com/forms/country-state-drop-down.html
http://www.javascriptsource.com/forms/country-state-drop-down.html
回答by kishan Radadiya
You can try this code:
你可以试试这个代码：
<html>
<head>
<title>Demo by kishan Radadiya</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Countries
var country_arr = new Array("Select Country","AUSTRALIA","INDIA","NEW ZEALAND","USA","UAE","MAURITIUS");
$.each(country_arr, function (i, item) {
$('#country').append($('<option>', {
value: i,
text : item,
}, '</option>' ));
});
// States
var s_a = new Array();
s_a[0]="Select State";
s_a[1]="Select State|QUEENSLAND|VICTORIA";
s_a[2]="Select State|ANDHRAPRADESH|KARNATAKA|TAMILNADU|DELHI|GOA|W-BENGAL|GUJARAT|MADHYAPRADESH|MAHARASHTRA|RAJASTHAN";
s_a[3]="Select State|AUCKLAND";
s_a[4]="Select State|NEWJERSEY|ILLINOIS";
s_a[5]="Select State|DUBAI";
s_a[6]="Select State|MAURITIUS";
// Cities
var c_a = new Array();
c_a['QUEENSLAND']="BRISBANE";
c_a['VICTORIA']="MELBOURNE";
c_a['ANDHRAPRADESH']="HYDERABAD";
c_a['KARNATAKA']="BANGLORE";
c_a['TAMILNADU']="CHENNAI";
c_a['DELHI']="DELHI";
c_a['GOA']="GOA";
c_a['W-BENGAL']="KOLKATA";
c_a['GUJARAT']="AHMEDABAD1|AHMEDABAD2|AHMEDABAD3|BARODA|BHAVNAGAR|MEHSANA|RAJKOT|SURAT|UNA";
c_a['MADHYAPRADESH']="INDORE";
c_a['MAHARASHTRA']="MUMBAI|PUNE";
c_a['RAJASTHAN']="ABU";
c_a['AUCKLAND']="AUCKLAND";
c_a['NEWJERSEY']="EDISON";
c_a['ILLINOIS']="CHICAGO";
c_a['MAURITIUS']="MAURITIUS";
c_a['DUBAI']="DUBAI";
$('#country').change(function(){
var c = $(this).val();
var state_arr = s_a[c].split("|");
$('#state').empty();
$('#city').empty();
if(c==0){
$('#state').append($('<option>', {
value: '0',
text: 'Select State',
}, '</option>'));
}else {
$.each(state_arr, function (i, item_state) {
$('#state').append($('<option>', {
value: item_state,
text: item_state,
}, '</option>'));
});
}
$('#city').append($('<option>', {
value: '0',
text: 'Select City',
}, '</option>'));
});
$('#state').change(function(){
var s = $(this).val();
if(s=='Select State'){
$('#city').empty();
$('#city').append($('<option>', {
value: '0',
text: 'Select City',
}, '</option>'));
}
var city_arr = c_a[s].split("|");
$('#city').empty();
$.each(city_arr, function (j, item_city) {
$('#city').append($('<option>', {
value: item_city,
text: item_city,
}, '</option>'));
});
});
});
</script>
</head>
<body>
<select name="country" id="country"></select> <br>
<select name="state" id="state"></select> <br>
<select name="city" id="city"></select>
</body>
</html>回答by Sriram
Well there are plenty of sources online for SQL databases of such utility. (I found that this one solved my problem: https://gist.github.com/ankitnetwork18/4509792) The next steps are fairly straight-forward. Just load everything through an AJAX request.
嗯，有很多这样的实用程序的 SQL 数据库的在线资源。（我发现这个解决了我的问题：https: //gist.github.com/ankitnetwork18/4509792）接下来的步骤相当简单。只需通过 AJAX 请求加载所有内容。
