JavaScript 实现省市级联
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>级联</title>
<script language="javascript">
var Provinces=new Array(
new Array("110000","北京市"),
new Array("120000","天津市"),
new Array("130000","河北省"),
new Array("140000","山西省"),
new Array("150000","内蒙古自治区"),
new Array("210000","辽宁省"),
new Array("220000","吉林省"),
new Array("230000","黑龙江省"),
new Array("310000","上海市"),
new Array("320000","江苏省"),
new Array("330000","浙江省"),
new Array("340000","安徽省"),
new Array("350000","福建省"),
new Array("360000","江西省"),
new Array("370000","山东省"),
new Array("410000","河南省"),
new Array("420000","湖北省"),
new Array("430000","湖南省"),
new Array("440000","广东省"),
new Array("450000","广西壮族自治区"),
new Array("460000","海南省"),
new Array("500000","重庆市"),
new Array("510000","四川省"),
new Array("520000","贵州省"),
new Array("530000","云南省"),
new Array("540000","西藏自治区"),
new Array("610000","陕西省"),
new Array("620000","甘肃省"),
new Array("630000","青海省"),
new Array("640000","宁夏回族自治区"),
new Array("650000","新疆维吾尔自治区"),
new Array("710000","台湾省"),
new Array("810000","香港特别行政区"),
new Array("820000","澳门特别行政区")
);//省码和省名称数组
var Cities=new Array(
new Array("110100","北京"),
new Array("120100","天津"),
new Array("130101","石家庄"),
new Array("130201","唐山"),
new Array("130301","秦皇岛"),
new Array("130701","张家口"),
new Array("130801","承德"),
new Array("131001","廊坊"),
new Array("130401","邯郸"),
new Array("130501","邢台"),
new Array("130601","保定"),
new Array("130901","沧州"),
new Array("133001","衡水"),
new Array("140101","太原"),
new Array("140201","大同"),
new Array("140301","阳泉"),
new Array("140501","晋城"),
new Array("140601","朔州"),
new Array("142201","忻州"),
new Array("142331","离石"),
new Array("142401","榆次"),
new Array("142601","临汾"),
new Array("142701","运城"),
new Array("140401","长治"),
new Array("150101","呼和浩特"),
new Array("150201","包头"),
new Array("150301","乌海"),
new Array("152601","集宁"),
new Array("152701","东胜"),
new Array("152801","临河"),
new Array("152921","阿拉善左旗"),
new Array("150401","赤峰"),
new Array("152301","通辽"),
new Array("152502","锡林浩特"),
new Array("152101","海拉尔"),
new Array("152201","乌兰浩特"),
new Array("210101","沈阳"),
new Array("210201","大连"),
new Array("210301","鞍山"),
new Array("210401","抚顺"),
new Array("210501","本溪"),
new Array("210701","锦州"),
new Array("210801","营口"),
new Array("210901","阜新"),
new Array("211101","盘锦"),
new Array("211201","铁岭"),
new Array("211301","朝阳"),
new Array("211401","锦西"),
new Array("210601","丹东"),
new Array("220101","长春"),
new Array("220201","吉林"),
new Array("220301","四平"),
new Array("220401","辽源"),
new Array("220601","浑江"),
new Array("222301","白城"),
new Array("222401","延吉"),
new Array("220501","通化"),
new Array("230101","哈尔滨"),
new Array("230301","鸡西"),
new Array("230401","鹤岗"),
new Array("230501","双鸭山"),
new Array("230701","伊春"),
new Array("230801","佳木斯"),
new Array("230901","七台河"),
new Array("231001","牡丹江"),
new Array("232301","绥化"),
new Array("230201","齐齐哈尔"),
new Array("230601","大庆"),
new Array("232601","黑河"),
new Array("232700","加格达奇"),
new Array("310100","上海"),
new Array("320101","南京"),
new Array("320201","无锡"),
new Array("320301","徐州"),
new Array("320401","常州"),
new Array("320501","苏州"),
new Array("320600","南通"),
new Array("320701","连云港"),
new Array("320801","淮阴"),
new Array("320901","盐城"),
new Array("321001","扬州"),
new Array("321101","镇江"),
new Array("330101","杭州"),
new Array("330201","宁波"),
new Array("330301","温州"),
new Array("330401","嘉兴"),
new Array("330501","湖州"),
new Array("330601","绍兴"),
new Array("330701","金华"),
new Array("330801","衢州"),
new Array("330901","舟山"),
new Array("332501","丽水"),
new Array("332602","临海"),
new Array("340101","合肥"),
new Array("340201","芜湖"),
new Array("340301","蚌埠"),
new Array("340401","淮南"),
new Array("340501","马鞍山"),
new Array("340601","淮北"),
new Array("340701","铜陵"),
new Array("340801","安庆"),
new Array("341001","黄山"),
new Array("342101","阜阳"),
new Array("342201","宿州"),
new Array("342301","滁州"),
new Array("342401","六安"),
new Array("342501","宣州"),
new Array("342601","巢湖"),
new Array("342901","贵池"),
new Array("350101","福州"),
new Array("350201","厦门"),
new Array("350301","莆田"),
new Array("350401","三明"),
new Array("350501","泉州"),
new Array("350601","漳州"),
new Array("352101","南平"),
new Array("352201","宁德"),
new Array("352601","龙岩"),
new Array("360101","南昌"),
new Array("360201","景德镇"),
new Array("362101","赣州"),
new Array("360301","萍乡"),
new Array("360401","九江"),
new Array("360501","新余"),
new Array("360601","鹰潭"),
new Array("362201","宜春"),
new Array("362301","上饶"),
new Array("362401","吉安"),
new Array("362502","临川"),
new Array("370101","济南"),
new Array("370201","青岛"),
new Array("370301","淄博"),
new Array("370401","枣庄"),
new Array("370501","东营"),
new Array("370601","烟台"),
new Array("370701","潍坊"),
new Array("370801","济宁"),
new Array("370901","泰安"),
new Array("371001","威海"),
new Array("371100","日照"),
new Array("372301","滨州"),
new Array("372401","德州"),
new Array("372501","聊城"),
new Array("372801","临沂"),
new Array("372901","菏泽"),
new Array("410101","郑州"),
new Array("410201","开封"),
new Array("410301","洛阳"),
new Array("410401","平顶山"),
new Array("410501","安阳"),
new Array("410601","鹤壁"),
new Array("410701","新乡"),
new Array("410801","焦作"),
new Array("410901","濮阳"),
new Array("411001","许昌"),
new Array("411101","漯河"),
new Array("411201","三门峡"),
new Array("412301","商丘"),
new Array("412701","周口"),
new Array("412801","驻马店"),
new Array("412901","南阳"),
new Array("413001","信阳"),
new Array("420101","武汉"),
new Array("420201","黄石"),
new Array("420301","十堰"),
new Array("420400","沙市"),
new Array("420501","宜昌"),
new Array("420601","襄樊"),
new Array("420701","鄂州"),
new Array("420801","荆门"),
new Array("422103","黄州"),
new Array("422201","孝感"),
new Array("422301","咸宁"),
new Array("422421","江陵"),
new Array("422801","恩施"),
new Array("430101","长沙"),
new Array("430401","衡阳"),
new Array("430501","邵阳"),
new Array("432801","郴州"),
new Array("432901","永州"),
new Array("430801","大庸"),
new Array("433001","怀化"),
new Array("433101","吉首"),
new Array("430201","株洲"),
new Array("430301","湘潭"),
new Array("430601","岳阳"),
new Array("430701","常德"),
new Array("432301","益阳"),
new Array("432501","娄底"),
new Array("440101","广州"),
new Array("440301","深圳"),
new Array("441501","汕尾"),
new Array("441301","惠州"),
new Array("441601","河源"),
new Array("440601","佛山"),
new Array("441801","清远"),
new Array("441901","东莞"),
new Array("440401","珠海"),
new Array("440701","江门"),
new Array("441201","肇庆"),
new Array("442001","中山"),
new Array("440801","湛江"),
new Array("440901","茂名"),
new Array("440201","韶关"),
new Array("440501","汕头"),
new Array("441401","梅州"),
new Array("441701","阳江"),
new Array("450101","南宁"),
new Array("450401","梧州"),
new Array("452501","玉林"),
new Array("450301","桂林"),
new Array("452601","百色"),
new Array("452701","河池"),
new Array("452802","钦州"),
new Array("450201","柳州"),
new Array("450501","北海"),
new Array("460100","海口"),
new Array("460200","三亚"),
new Array("510101","成都"),
new Array("513321","康定"),
new Array("513101","雅安"),
new Array("513229","马尔康"),
new Array("510301","自贡"),
new Array("500100","重庆"),
new Array("512901","南充"),
new Array("510501","泸州"),
new Array("510601","德阳"),
new Array("510701","绵阳"),
new Array("510901","遂宁"),
new Array("511001","内江"),
new Array("511101","乐山"),
new Array("512501","宜宾"),
new Array("510801","广元"),
new Array("513021","达县"),
new Array("513401","西昌"),
new Array("510401","攀枝花"),
new Array("500239","黔江土家族苗族自治县"),
new Array("520101","贵阳"),
new Array("520200","六盘水"),
new Array("522201","铜仁"),
new Array("522501","安顺"),
new Array("522601","凯里"),
new Array("522701","都匀"),
new Array("522301","兴义"),
new Array("522421","毕节"),
new Array("522101","遵义"),
new Array("530101","昆明"),
new Array("530201","东川"),
new Array("532201","曲靖"),
new Array("532301","楚雄"),
new Array("532401","玉溪"),
new Array("532501","个旧"),
new Array("532621","文山"),
new Array("532721","思茅"),
new Array("532101","昭通"),
new Array("532821","景洪"),
new Array("532901","大理"),
new Array("533001","保山"),
new Array("533121","潞西"),
new Array("533221","丽江纳西族自治县"),
new Array("533321","泸水"),
new Array("533421","中甸"),
new Array("533521","临沧"),
new Array("540101","拉萨"),
new Array("542121","昌都"),
new Array("542221","乃东"),
new Array("542301","日喀则"),
new Array("542421","那曲"),
new Array("542523","噶尔"),
new Array("542621","林芝"),
new Array("610101","西安"),
new Array("610201","铜川"),
new Array("610301","宝鸡"),
new Array("610401","咸阳"),
new Array("612101","渭南"),
new Array("612301","汉中"),
new Array("612401","安康"),
new Array("612501","商州"),
new Array("612601","延安"),
new Array("612701","榆林"),
new Array("620101","兰州"),
new Array("620401","白银"),
new Array("620301","金昌"),
new Array("620501","天水"),
new Array("622201","张掖"),
new Array("622301","武威"),
new Array("622421","定西"),
new Array("622624","成县"),
new Array("622701","平凉"),
new Array("622801","西峰"),
new Array("622901","临夏"),
new Array("623027","夏河"),
new Array("620201","嘉峪关"),
new Array("622102","酒泉"),
new Array("630100","西宁"),
new Array("632121","平安"),
new Array("632221","门源回族自治县"),
new Array("632321","同仁"),
new Array("632521","共和"),
new Array("632621","玛沁"),
new Array("632721","玉树"),
new Array("632802","德令哈"),
new Array("640101","银川"),
new Array("640201","石嘴山"),
new Array("642101","吴忠"),
new Array("642221","固原"),
new Array("650101","乌鲁木齐"),
new Array("650201","克拉玛依"),
new Array("652101","吐鲁番"),
new Array("652201","哈密"),
new Array("652301","昌吉"),
new Array("652701","博乐"),
new Array("652801","库尔勒"),
new Array("652901","阿克苏"),
new Array("653001","阿图什"),
new Array("653101","喀什"),
new Array("654101","伊宁"),
new Array("710001","台北"),
new Array("710002","基隆"),
new Array("710020","台南"),
new Array("710019","高雄"),
new Array("710008","台中"),
new Array("211001","辽阳"),
new Array("653201","和田"),
new Array("542200","泽当镇"),
new Array("542600","八一镇"),
new Array("820000","澳门"),
new Array("810000","香港")
);//市码和市名称数组
window.onload = function() {
var province = document.myform.province;获取省框对象
var city = document.myform.city;获取市框对象
for(i = 0; i < Provinces.length; i ++)添加省选项
{
if(i == 0)
province.options[i] = new Option("请选择", 000000);
else
province.options[i] = new Option(Provinces[i - 1][1], Provinces[i - 1][0]);
}
city.options[0] = new Option("请选择", 000000);添加未选择省时，市选项
province.onchange = function() {//省框所选项被改变事件，这个很重要
var provinceCode = province.options[province.selectedIndex].value;//所选省码
var count = null;//市框长度
if(provinceCode == 110000 || provinceCode == 120000 || provinceCode == 310000 || provinceCode == 500000 || provinceCode == 810000 || provinceCode == 820000)
{
count = 0;//直辖市和特别行政区
} else {
city.options[0] = new Option("请选择", provinceCode);//非直辖市和特别行政区
count = 1
}
for(j = 0; j < Cities.length; j++)//添加市选项
{
if(Cities[j][0].toString().substring(0,2) == provinceCode.toString().substring(0,2))
{
city.options[count] = new Option(Cities[j][1], Cities[j][0]);
count ++;
}
}
city.options.length = count;//指定市框长度
}
}
</script>
</head>
<body>
<form name="myform">
省：<select name="province"></select>
市：<select name="city"></select>
</form>
</body>
</html>
分享到：
发表评论
相关推荐
在实现省市级联的过程中，主要有以下几个关键知识点： 1. **DOM操作**：JavaScript通过Document Object Model（DOM）来操作HTML元素。我们需要获取或创建省市区的下拉列表，并根据用户的选择动态添加或更新城市选项...
本文将详细讲解如何使用JavaScript实现这样的功能，主要基于标题和描述中的内容，结合实际应用场景来深入探讨。 一、省市数据存储 在JavaScript中，我们可以使用二维数组来存储省市区级的数据结构。例如： ```...
使用javaScript实现省市级联（二级级联，不能三级级联）
下面将详细介绍如何使用JavaScript实现省市级联的操作。 1. 数据结构设计： 在实现省市级联前，我们需要准备数据。通常，数据以JSON对象的形式存储，包含省份和对应的城市列表。例如： ```json { "省份1": [...
以上代码展示了如何用JavaScript实现在HTML中创建一个省市级联的交互功能。实际应用中，可能还需要考虑异步加载数据、错误处理、性能优化等方面的问题。通过这种方式，我们可以创建出具有动态响应和良好用户体验的...
本文主要介绍了使用JavaScript实现省市级联效果的方法，并提供了详细的代码示例。 知识点一：JavaScript数组 在本文中，我们可以看到，作者使用了JavaScript中的数组（Array）来存储省份和城市的信息。例如，`...
JavaScript省市级联是一种常见的前端开发技术，用于实现用户在选择省份时自动更新下拉框中的城市选项，以此类推到区县等更细的行政区域。这种功能在各种需要填写地址信息的表单中非常常见，例如在线购物、预约服务等...
### js实现省市级联知识点详解 ...综上所述，通过JavaScript实现省市级联不仅可以有效减轻数据库的压力，还能提升用户的使用体验。开发者可以根据实际需求对其进行定制和优化，使其更好地服务于不同的应用场景。
简单实现js省市级联效果->>>>还在等待什么？->>>>javascript和json放在同个页面，方便查看。
JavaScript的省市级联特效是一种常见的前端交互设计，用于在网页中实现省份选择后自动更新城市选项的效果。这种特效常见于地址填写、订单提交等场景，为用户提供便捷的地理位置选择方式。下面将详细介绍如何使用...
以上就是使用JavaScript实现省市级联下拉框的基本流程和关键点。在实践中，还可以根据需求进行功能扩展，比如添加搜索功能、支持多级联动等。掌握这种技术对于前端开发者来说是非常基础且实用的技能。
本文将深入探讨如何利用JavaScript实现省市级联的原理与方法。 首先，我们需要理解省级联的基础架构。它通常包含两个或更多的下拉列表：一个用于省份，另一个用于城市。当用户在省份列表中选择一个项目时，城市列表...
本文将深入探讨如何使用 jQuery 实现省市级联。 首先，我们需要理解基本的 HTML 结构。一个简单的省市级联结构可能包含两个或三个 `<select>` 元素，每个元素代表一个层级（省、市、区/县）。例如： ```html ...
在网页开发中，"Ajax 省市级联"是一种常见的交互设计，用于实现用户选择省份时，自动加载并展示对应省份的城市列表。这种方式极大地提升了用户体验，避免了页面刷新，使得数据加载更为流畅。Ajax（Asynchronous ...
以上就是AJAX省市级联的关键技术和实现细节，它利用了AJAX的异步特性和JSON数据交换，结合JavaScript和DOM操作，实现了高效、流畅的用户体验。在实际项目中，开发者还需要根据具体需求和场景进行适当的调整和优化。
在这个名为"王龙翔_火狐上调试通过_武汉中心_省市级联菜单_JSD1112.html"的文件中，我们可以预见到它可能包含了实现上述逻辑的HTML、CSS和JavaScript代码。开发者王龙翔已经确保这个菜单在Firefox浏览器上通过了调试...
javascript实现省市级联菜单的效果
在“xml+js省市级联”这个场景中，它们被结合使用来实现一个动态的、无需页面刷新的省级和市级联动选择功能。 这种功能常见于地址输入或区域选择的场景，用户首先选择省份，然后根据所选省份动态加载对应的市，整个...