级联效果预览
1.测试页面index.html
<html> <head> <title>省市区三级级联</title> <script type="text/javascript" src="cascade.js"></script> <script type="text/javascript"> xn.init(['省','市','区','name']); xn.init(['provinces','citys','countys','code']); </script> </head> <body> <div id="txtHint"></div> <select id="省"></select><select id="市"></select><select id="区"></select><br/> <select id="provinces"></select><select id="citys"></select><select id="countys"></select> </body> </html>
2.脚本cascade.1.0.3.js
/*****************************************************************************
JavaScript Document
@author 陈小尼
@version v1.3
加载xml文档
可以在IE5+, FireFox, Chrome, Opera, Safari浏览器运行
使用方法：
将代表省、市、区的select的id以数组的形式给xn.init()方法[如:xn.init(['province','city','county','code'])].
实例：
<html>
<head>
<title>PCC省市区级联</title>
<script type="text/javascript" src="cascade.js"></script>
<script type="text/javascript">
xn.init(['province','city','county','code']);
</script>
</head>
<body>
<select id="province"></select><select id="city"></select><select id="county"></select>
</body>
</html>
修改了在Chrome加载不成功的问题
/****************************************************************************/
var xn=new Object();
xn.init=function(a){
var xmldoc;
if (window.XMLHttpRequest){// code for IE7+, FireFox, Chrome, Opera, Safari
xmldoc = new XMLHttpRequest();
}else { // code for IE6, IE5
xmldoc = new ActiveXObject("Microsoft.XMLHTTP");
}
xmldoc.onreadystatechange=function(){
if (xmldoc.readyState == 4){
if( xmldoc.status == 200){
d = xmldoc.responseXML;
getCascade(a,d);
}else{
xn.init(a)
}
}
};
xmldoc.open("GET","GBT0011-2011.xml",true);
xmldoc.send();
}
function getCascade(a,d){
var province=document.getElementById(a[0]);
var city=document.getElementById(a[1]);
var county=document.getElementById(a[2]);
//初始化级联框
var pro=d.getElementsByTagName("province");
for(i=0;i<pro.length;i++){
var oOption=new Option(pro[i].getAttribute('name'),pro[i].getAttribute(a[3]));
province.options.add(oOption);
if(province.value==pro[i].getAttribute(a[3])){
var cit=pro[i].getElementsByTagName("city");
for(j=0;j<cit.length;j++){
var oOption=new Option(cit[j].getAttribute('name'),cit[j].getAttribute(a[3]));
city.options.add(oOption);
if(city.value==cit[j].getAttribute(a[3])){
var cou=cit[j].getElementsByTagName('county');
for(k=0;k<cou.length;k++){
var oOption=new Option(cou[k].getAttribute('name'),cou[k].getAttribute(a[3]));
county.options.add(oOption);
}
}
}
}
}
//省菜单onchange
province.onchange=function(){
city.options.length=null;
county.options.length=null;
for(i=0;i<pro.length;i++){
if(province.value==pro[i].getAttribute(a[3])){
var cit=pro[i].getElementsByTagName("city");
for(j=0;j<cit.length;j++){
var oOption=new Option(cit[j].getAttribute('name'),cit[j].getAttribute(a[3]));
city.options.add(oOption);
if(city.value==cit[j].getAttribute(a[3])){
var cou=cit[j].getElementsByTagName('county');
for(k=0;k<cou.length;k++){
var oOption=new Option(cou[k].getAttribute('name'),cou[k].getAttribute(a[3]));
county.options.add(oOption);
}
}
}
}
}
};
//市菜单onchange
city.onchange=function(){
var cityval=city.value;
city.options.length=null;
for(i=0;i<pro.length;i++){
if(province.value==pro[i].getAttribute(a[3])){
var cit=pro[i].getElementsByTagName("city");
for(j=0;j<cit.length;j++){
var oOption=new Option(cit[j].getAttribute('name'),cit[j].getAttribute(a[3]));
city.options.add(oOption);
city.value=cityval;
if(city.value==cit[j].getAttribute(a[3])){
county.options.length=null;
var cou=cit[j].getElementsByTagName('county');
for(k=0;k<cou.length;k++){
var oOption=new Option(cou[k].getAttribute('name'),cou[k].getAttribute(a[3]));
county.options.add(oOption);
}
}
}
}
}
};
}
3.资源文件20111031.xml
文件内容过长放在cascade.rar文件中
地市县的地区会有稍微变化,等待更新......
4.注:由于读取xml的文件用的是AJAX,所以解压后的文件直接运行没有效果,建议将其放到服务器中测试或使用.
相关推荐
在IT领域，"省市区级联下拉"是一种常见的用户界面设计模式，主要应用于地理信息相关的数据输入场景，如注册表单、地址填写等。它通常由三个相互关联的下拉菜单组成，分别对应省份、城市（州）和区县，用户在选择一个...
在IT行业中，省市区级联通常是指在一个网页表单中，用户在选择省份后，下拉菜单会自动更新为对应省份的城市，接着选择城市后，再显示该城市下的区县。这种功能常用于地址填写、物流配送等场景，极大地提高了用户体验...
标题 "省市区级联sql脚本.zip" 涉及的是在数据库管理中，如何实现省级、市级和区级数据的关联操作。这种级联通常用于地理位置信息的存储和查询，例如在中国，用户可能需要根据省、市、区来定位某个具体的地址。在SQL...
在IT领域，尤其是在Web开发中，省市区级联是一个常见的需求，它用于创建一个下拉菜单，用户可以按顺序选择省份、城市和区县，从而实现地理位置的选择。本项目名为"最简单的省市区级联（带数据库）"，提供了一个简单...
通用用java语言编写的基于SSH框架的省市区级联，通过该demo可以明白的整个SSH的执行过程的和使用 .
在这种场景下，"JS省市区级联菜单"是一个使用JavaScript实现的、用于展示中国省级、市级、区县级的下拉联动效果的代码库。该资源特别强调其包含最新且完整的数据，包括台湾省、香港特别行政区和澳门特别行政区的市区...
在这个示例中，它被用来实现省市区级联菜单，即当用户选择一个省份时，城市列表会动态更新；接着选择城市后，县区列表也会随之变化。这个功能在很多网站的地址输入、配送范围设定等场景中非常常见。 首先，我们来看...
本示例中的“省市区级联菜单”是基于JavaScript库jQuery实现的，jQuery以其简洁的API和良好的浏览器兼容性，深受开发者喜爱。 首先，我们需要理解jQuery的基本用法。jQuery库通过选择器（Selectors）找到HTML元素，...
在ASP.NET开发中，创建省市区级联菜单是一项常见的需求，它可以帮助用户在选择地址时进行逐步筛选，提高用户体验。本篇文章将详细讲解如何通过三种不同的技术实现这一功能：JavaScript/jQuery、纯数据库读取以及结合...
JavaScript 省市区级联查询是网页开发中常见的一种功能，用于实现用户在选择省份时自动更新可选的城市和区县列表。这种功能通常应用于地址输入或者定位服务中，为用户提供方便快捷的选择体验。在本文中，我们将探讨...
在IT行业中，"省市区级联"是一种常见的前端交互设计，尤其在地址选择、地理位置相关的应用中非常普遍。这个"省市区级联demo"是一个示例项目，它演示了如何在用户界面中实现省份、城市、区县三级联动的效果。通过这种...
级联选择器下的省市区初始js数据
用于前端处理省市区三级级联选择操作的数据文件。在js文件中定义变量为此数据，包含字段label、value、children，可用在element-ui的Cascader 级联选择器中。
《distpicker：省市区级联选择插件详解》 在Web开发中，用户常常需要填写地址信息，包括省、市、区三级数据。为了简化这一过程，提高用户体验，开发者们通常会采用级联选择（Cascading Dropdown）的方式，使得用户...
全国省市区级联数据包是一个包含了中国所有省份、城市及区县详细信息的数据库资源，主要以SQL文件的形式提供。这种数据包在许多需要处理地域信息的IT项目中非常常见，例如在线服务、数据分析、地图应用等。在这里，...
Layui 使用 TinyMCE 富文本编辑器Layui 使用 citypicker 省市区级联选择地址1.进入 Layui 第三方组件平台下载该拓展组件2.写一个测试 Demo3.结果查看及补充4.效果演示5.源码地址 Layui 使用 citypicker 省市区级联...
在IT行业中，"省市区级联js"是一个常见的前端开发需求，主要应用于地理信息系统的交互设计，例如在线购物、地图服务、信息发布等场景。这种级联（Cascading）的效果通常指的是用户在选择省份后，下拉菜单会自动更新...
在"SpringMVC省市区级联"这个主题中，我们将深入探讨如何利用SpringMVC来实现前端页面与后端数据库之间的三级联动，即省份、城市和区县的级联选择。 首先，我们需要理解“级联”这个概念。在UI设计中，级联意味着一...