<html>
<head>
<title>省市级联</title>
</head>
<body>
<script language="javascript">
/*
实现省市级联效果
*/
var provinces={
安徽省:["安庆市","蚌埠市","巢湖地区","池州地区","滁州市","阜阳地区","合肥市","淮北市","淮南市","黄山市","六安地区","马鞍山市","宿县地区","铜陵市","芜湖市","宣城地区"],
湖北省:["鄂西土家族苗族自治州","鄂州市","黄冈地区","黄石市","荆门市","荆州地区","沙市市","省直辖行政单位","十堰市","武汉市","咸宁地区","襄樊市","孝感地区","宜昌市","郧阳地区"],
湖南省:["长沙市","常德市","郴州地区","大庸市","衡阳市","怀化地区","零陵地区","娄底地区","邵阳市","湘潭市","湘西土家族苗族自治州","益阳地区","岳阳市","株洲市"],
河南省:["安阳市","鹤壁市","焦作市","开封市","洛阳市","漯河市","南阳地区","平顶山市","濮阳市","三门峡市","商丘地区","新乡市","信阳地区","许昌市","郑州市","周口地区","驻马店地区"],
河北省:["保定地区","保定市","沧州地区","沧州市","承德地区","承德市","邯郸地区","邯郸市","衡水地区","廊坊市","秦皇岛市","石家庄地区","石家庄市","唐山市","邢台地区","邢台市","张家口地区","张家口市"],
甘肃省:["白银市","定西地区","甘南藏族自治州","嘉峪关市","金昌市","酒泉地区","兰州市","临夏回族自治州","陇南地区","平凉地区","庆阳地区","天水市","武威地区","张掖地区"],
广东省:["潮州市","东莞市","佛山市","广州市","河源市","惠州市","江门市","揭阳市","茂名市","梅州市","清远市","汕头市","汕尾市","韶关市","深圳市","阳江市","湛江市","肇庆市","中山市","珠海市"],
广西省:["百色地区","北海市","桂林地区","桂林市","河池地区","柳州地区","柳州市","南宁地区","南宁市","钦州地区","梧州地区","梧州市","玉林地区"],
山东省:["滨州地区","德州地区","东营市","菏泽地区","济南市","济宁市","莱芜市","聊城地区","临沂地区","青岛市","日照市","泰安市","威海市","潍坊市","烟台市","枣庄市","淄博市"],
山西省:["长治市","大同市","晋城市","晋中地区","临汾地区","吕梁地区","朔州市","太原市","忻州地区","雁北地区","阳泉市","运城地区"]
};
//加载省
function loadProvince()
{
//获取省所对应的列表框对象
var pro=document.getElementById("province");
//从数组中提取省份信息
for(var p in provinces)
{
//创建option元素
var opt=document.createElement("option");
//设置option元素中的信息
opt.innerText=p;
opt.value=p;
//将option元素添加到select元素中(option是select的子节点)
pro.appendChild(opt);
}
}
//加载市
function loadCity()
{
//获取用户的省份
var selectProvince=document.getElementById("province").value;
//根据省获取市(citys是一个数组)
var citys=provinces[selectProvince];
//获取市所对应的列表框对象
var city=document.getElementById("city");
//将元素列表框中的元素全部清空
city.innerText="";
var opt=document.createElement("option");
opt.innerText="--请选择城市--";
opt.value="0";
city.appendChild(opt);
for(var index=0;index<citys.length;index++)
{
opt=document.createElement("option");
opt.innerText=citys[index];
opt.value=citys[index];
city.appendChild(opt);
}
}
//在窗口加载时添加省份信息
window.onload=loadProvince;
</script>
<select id="province" onchange="loadCity();">
<option value="0">--请选择省份--</option>
</select>
<select id="city">
<option value="0">--请选择城市--</option>
</select>
</body>
</html>
分享到：
相关推荐
在网页开发中，"Ajax 省市级联"是一种常见的交互设计，用于实现用户选择省份时，自动加载并展示对应省份的城市列表。这种方式极大地提升了用户体验，避免了页面刷新，使得数据加载更为流畅。Ajax（Asynchronous ...
"HTML中JavaScript版省市级联"是一个常见的前端技术应用，用于实现动态的省市区选择功能。在这个场景下，用户可以从一个下拉菜单中选择省份，然后根据所选省份自动更新市、区的下拉选项。这种功能在注册、地址填写等...
【安卓 Spinner 实现省市级联】是Android开发中常见的需求，用于在应用程序中创建一个下拉选择组件，展示省、市、区等地理层级的数据。Spinner控件在Android中广泛用于实现有限选项的选择，通常与Adapter配合使用，...
标题中的“省市级联列表”通常是指在数据库设计中用于存储中国省份和城市信息的一种数据结构，这在很多需要地域信息的应用中非常常见，比如电商、物流、招聘网站等。这种列表一般会包括省份和其下属的城市，形成一个...
在IT行业中，省市级联（Province-City-County联动）是一种常见的前端交互技术，尤其在构建具有地域选择功能的Web应用时。这个标题"省市级联Ajax"表明我们正在讨论如何利用Ajax技术来实现省级、市级和县级之间的联动...
在IT行业中，"省市级联完整代码"通常指的是一个用于实现中国省级和市级选择功能的程序代码，这种功能常见于各种需要用户输入地区信息的Web应用或者移动应用中。级联选择意味着当用户选择了一个省份后，下拉框会动态...
【AJAX省市级联】是一种常见的前端开发技术，用于实现网页上的动态下拉联动效果，让用户在选择省份后，自动加载并显示对应的市、区或县的列表，无需刷新整个页面。这种技术主要依赖于AJAX（Asynchronous JavaScript ...
### 省市级联实现详解 #### 一、概述 在现代Web应用开发中，级联选择器（如省市区选择）是一种常见的交互设计模式，主要用于处理多层级数据的关联选择场景。例如，在用户填写地址时，根据所选省份动态显示对应的...
在IT行业中，省市级联（Province-City-County Association，简称PCCA）是一种常见的数据结构和功能设计，特别是在地理信息系统、电子商务、政务服务等场景中，用于处理和展示多层次的地域层级关系。它允许用户在选择...
"省市级联"是一个常见的前端功能，主要用于实现用户在选择省份时，下拉菜单自动更新对应的城市选项，从而提供更加便捷的用户输入体验。这种功能在注册、地址填写等场景中非常常见。 在给定的"js省市级联"项目中，它...
"超强的jquery省市级联"是指利用jQuery实现的一种动态联动效果，通常用于网页上的地址选择，例如选择省份后自动加载对应的城市列表，城市选择后再加载对应的区县列表。这种功能在电子商务网站、地图服务、物流配送等...
使用javaScript实现省市级联（二级级联，不能三级级联）
在IT行业中，XML因其灵活性和易读性而广泛应用于各种应用场景，包括构建省市级联选择功能。在这个项目中，“XML省市级联”意味着我们使用XML文件来存储和管理省份和城市的数据，然后通过Dreamweaver这一流行的网页...
在IT行业中，省市级联（Province-City-County Association，简称PCCA）是一种常见的地理信息组织方式，尤其在Web开发中用于实现下拉选择框的联动效果，为用户提供便捷的地区选择体验。这个数据包是专门针对中国境内...
绝对给力的 省市级联demo [removed][removed] [removed][removed] [removed][removed] <style type="text/css"> #province{ width:90px; margin-left:5px} #city{ width:130px; margin-left:5px} #...
### 使用jQuery实现省市级联选择器 #### 一、引言 在许多应用程序中，我们需要让用户根据省份选择相应的城市，这种需求通常通过级联选择器来实现。传统的做法是使用纯JavaScript结合HTML来完成，但这种方法较为繁琐...
在“xml+js省市级联”这个场景中，它们被结合使用来实现一个动态的、无需页面刷新的省级和市级联动选择功能。 这种功能常见于地址输入或区域选择的场景，用户首先选择省份，然后根据所选省份动态加载对应的市，整个...
在IT行业中，省市级联（Province-City-Association，PCA）是一种常见的数据组织方式，尤其在构建具有地域选择功能的Web应用或系统时。这里，我们主要探讨的是使用Java编程语言来实现这种功能的技术细节。 首先，...
JavaScript省市级联是一种常见的前端开发技术，用于实现用户在选择省份时自动更新下拉框中的城市选项，以此类推到区县等更细的行政区域。这种功能在各种需要填写地址信息的表单中非常常见，例如在线购物、预约服务等...
标题中的“省市级联”可能是指在中国的行政划分中，涉及到省级和市级行政区划的数据连接或集成。在IT行业中，这种“联”通常涉及到数据库设计、数据整合或者数据分析时，如何处理跨越不同级别的地理区域数据的问题。...