省市区级联

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量111 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript xml FF Chrome IE ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_20918/article/details/82063939
版权

级联效果预览

 

图片预览

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.οnchange=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.οnchange=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,所以解压后的文件直接运行没有效果,建议将其放到服务器中测试或使用.

iteye_20918
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超好用的省市区三级联动+常用城市设置
04-25
超级好用的省市区三级联动插件css+city-picker 组成,另加常用城市设置,可自己设置,轻松选择想选的城市,还是不会的可以询问
省市区三级联动数据库（完整版）
01-07
省市区数据库级联查询所用数据，旗舰版全数据，2018全数据
省市区（县）级联（移动端）
03-16
省市区（县）级联（移动端）
全国省市区(县)级联一张表 -sql
11-28
sql 一个表创建全国省、市、区，全国省市区三级地区含同一张表里，解压可直接使用。内含表结构，及所有插入语句
element-ui 级联选择Cascader选择省市区
流绪@微梦
01-15 7536
// 设置prop属性 props:{ label: 'areaName', value: 'areaId', //children: 'children', }, // 获取省市 getProvence() { post(url, {parentId: 0}).then((res) =&gt; { this.addressObject.list...
省市区级联下拉
03-10
在IT领域，"省市区级联下拉"是一种常见的用户界面设计模式，主要应用于地理信息相关的数据输入场景，如注册表单、地址填写等。它通常由三个相互关联的下拉菜单组成，分别对应省份、城市（州）和区县，用户在选择一个...
SSH的省市区级联
06-03
通用用java语言编写的基于SSH框架的省市区级联，通过该demo可以明白的整个SSH的执行过程的和使用 .
全国省市区级联数据js文件
07-08
级联选择器下的省市区初始js数据
antd Cascader省市区级联动数据（2020.2）
heerey525
06-20 7523
https://github.com/heerey525/antdCascaderDate/blob/master/src/cities.js
超简单方法实现省/市/地区级联查询
weixin_33946020的博客
10-26 533
本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/48829517 未经博主允许不得转载。 博主地址是：http://blog.csdn.net/freewebsys 1，关于中国地址 开发业务的时候遇到一个问题 需要弄一个省、市，地区的级联查询。 页面好做，...
级联选择器（el-cascader）动态加载（lazyLoad）实现省市区三级选择
yuan
03-18 1万+
开开心心工作，兢兢业业生活 1. 需求：实现一个省市区的级联选择器，点击一级，动态加载下一级 那好，我们找个轮子 2. 他山之石（找个轮子） Element UI 中国省市区级联数据 安装： npm install element-china-area-data -S 使用： <template> <div id="app"> <el-cascader size="large" :options="options" ..
中国省市县信息JS文件（省--市--县）
热门推荐
Ms_WangH
07-19 4万+
来自网络： https://www.sunzhongwei.com/js-provinces-three-level-linkage-selection-component?from=sidebar_new 文件内容 // 地址文件 var provice = [ { name: "北京市", city: [ { ...
JS实现省市级联
今天很快乐呀
09-03 1万+
现居住地： &lt;select id="selProvince" onchange="changeCity( )" style="width:100px"&gt; &lt;option&gt;--选择省份--&lt;/option&gt; &lt;/select&gt; &lt;select id="selCity" style=&qu
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 272
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 663
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
jquery-选择器常见用法
随笔
07-18 210
jquery-选择器，对象下有多个子元素时如何选择
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 939
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
省市区级联jquery
08-22
你可以使用jQuery来实现省市区级联的功能。以下是一个简单的示例代码： HTML部分： ```html 请选择省份 北京市">北京市 上海市">上海市 广东省">广东省 <!-- 其他省份选项 --> 请选择城市 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值