文档章节

js城市三级联动效果

透笔度
 透笔度
发布于 2016/05/27 17:30
字数 808
阅读 260
收藏 18

重点就是全国城市的json数据,逻辑就是简单的循环查找和返回对应索引。

加入变换事件的回调处理接口。

效果截图和下载地址: js城市三级联动效果下载地址

输入图片说明 输入图片说明 输入图片说明 输入图片说明

部分代码,运行前需要加入json格式城市数据即可:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>城市三级联动</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative; font-size:14px;}
.city{ margin:20px 200px; }
.selectbox{ height:50px; width:500px;background:#999;}
.selectbox select{ height:30px; width:120px; margin-right:10px; border:1px solid #999; line-height:30px;}
</style>
</head>
<body>
	<div class="city">

效果1:设置省市县不同的默认项

    	<div id="selectbox1" class="selectbox"></div>
    </div>

    <div class="city">

效果1:设置省市县相同默认项

    	<div id="selectbox2" class="selectbox"></div>
    </div>

    <div class="city">

效果2:只显示省份,省份选择后显示城市选择,县选择同理

    	<div id="selectbox3" class="selectbox"></div>
    </div>

</body>
<script type="text/javascript">
window.onload=function(){
	//效果1 三级联动
	new TbdCityChoice({id:"selectbox1",type:1,province:"请选择省份",city:"请选择市",town:"请选择县",names:["name1","name2","name3"],
	changeend:function(p,c,t){

	}}).init();
	//效果1 三级联动
	new TbdCityChoice({id:"selectbox2",type:1,province:"请选择",city:"请选择",town:"请选择",names:["name4","name5","name6"],
	changeend:function(p,c,t){
		alert(" 省:"+p+" 市:"+c+" 县:"+t);
		//根据返回做其他处理
	}}).init();
	//效果2 三级联动
	new TbdCityChoice({id:"selectbox3",type:2,province:"请选择省份",city:"请选择市",town:"请选择县",names:["name7","name8","name9"],
	changeend:function(p,c,t){

	}}).init();
};
</script>
<script type="text/javascript">
/*
args.id       根id
args.type     类型1 是全部显示
args.province 省份默认内容
args.city     市默认内容
args.town     县默认内容
args.names     name设置
args.changeend(p,c,t) 变化后的回调函数,返回对应 省份 城市 县
*/
function TbdCityChoice(args){
	this.rootele=document.getElementById(args.id);
	this.type=args.type;
	this.province=args.province;
	this.city=args.city;
	this.town=args.town;
	this.nameprovince=args.names[0];
	this.namecity=args.names[1];
	this.nametown=args.names[2];
	this.changeend=args.changeend;
	this.aid=null;
	this.bid=null;
	this.cid=null;	
	this.aele=null;
	this.bele=null;
	this.cele=null;
	var that=this;
	this.onelen=mapCityChoice.length;
	this.init=function(){
		this.appe();
		this.appendone();
		this.appendtwo(this.aid);
		this.appendthree(this.bid);
		this.addevent();
	};
	this.appe=function(){
		this.aele=document.createElement("select");
		this.aele.name=this.nameprovince;
		this.rootele.appendChild(this.aele);
		var tso=document.createElement("option");	
		tso.innerHTML=this.province;
		tso.value=this.province;
		tso.checked=true;
		this.aele.appendChild(tso);

		this.bele=document.createElement("select");
		this.bele.name=this.namecity;
		this.rootele.appendChild(this.bele);

		this.cele=document.createElement("select");
		this.cele.name=this.nametown;
		this.rootele.appendChild(this.cele);
		if(this.type==2){
			this.bele.style.visibility="hidden";
			this.cele.style.visibility="hidden";
		};				
	};
	this.appendone=function(){		
		for(var i=0;i<this.onelen;i++){
			var opo=document.createElement("option");
			opo.innerHTML=mapCityChoice[i].name;
			opo.value=mapCityChoice[i].name;
			this.aele.appendChild(opo);
		};		
	};
	this.appendtwo=function(){	
		var tso=document.createElement("option");	
		tso.innerHTML=this.city;
		tso.value=this.city;
		tso.checked=true;
		this.bele.appendChild(tso);	
		if(this.aid==null){

		}else{			
			var arr=mapCityChoice[this.aid].city;
			for(var j=0;j<arr.length;j++){
				var opo=document.createElement("option");
				opo.innerHTML=arr[j].name;
				opo.value=arr[j].name;
				this.bele.appendChild(opo);
			};			
		};
	};
	this.appendthree=function(){			
		var tso=document.createElement("option");	
		tso.innerHTML=this.town;
		tso.value=this.town;
		tso.checked=true;
		this.cele.appendChild(tso);	
		if(this.bid==null){

		}else{
			var arr=mapCityChoice[that.aid].city[this.bid].area;
			for(var j=0;j<arr.length;j++){
				var opo=document.createElement("option");
				opo.innerHTML=arr[j];
				opo.value=arr[j];
				this.cele.appendChild(opo);
			};
		};
	};
	this.addevent=function(){
		this.aele.onchange=function(){
			if(this.value!=that.province){				
				that.aid=that.searchcity(this.value);	
				if(that.type==2){
					that.bele.style.visibility="visible";
					that.cele.style.visibility="hidden";
				};			
			}else{
				that.aid=null;
				if(that.type==2){
					that.bele.style.visibility="hidden";
					that.cele.style.visibility="hidden";
				};
			};
			that.bele.innerHTML="";
			that.appendtwo();
			that.bid=null;
			that.cele.innerHTML="";
			that.appendthree();
			that.eventchange();			
		};
		this.bele.onchange=function(){
			if(this.value!=that.city){
				that.bid=that.searcharea(this.value);	
				if(that.type==2){
					that.cele.style.visibility="visible";
				};				
			}else{
				that.bid=null;
				if(that.type==2){
					that.cele.style.visibility="hidden";
				};
			};
			that.cele.innerHTML="";
			that.appendthree();
			that.eventchange();				
		};
		this.cele.onchange=function(){			
			that.eventchange();				
		};
	};
	this.searchcity=function(oneval){
		var s;
		for(var i=0;i<mapCityChoice.length;i++){
			if(mapCityChoice[i].name==oneval){
				s=i;
				break;
			};
		};	
		return s;
	};
	this.searcharea=function(twoval){
		var s;
		for(var i=0;i<mapCityChoice[that.aid].city.length;i++){
			if(mapCityChoice[that.aid].city[i].name==twoval){
				s=i;
				break;
			};
		};	
		return s;
	};
	this.eventchange=function(){
		var resultp=(that.aele.value==that.province)?false:that.aele.value;
		var resultc=(that.bele.value==that.city)?false:that.bele.value;
		var resultt=(that.cele.value==that.town)?false:that.cele.value;
		that.changeend(resultp,resultc,resultt);
	}
};
</script>
</html>

© 著作权归作者所有

共有 人打赏支持
上一篇: gulpfile.js
透笔度
粉丝 72
博文 128
码字总数 235452
作品 0
朝阳
前端工程师
私信 提问
jQuery Widgets —— 多组件 jQuery 插件库

jQuery Widgets 是一套基于 jQuery 或 JavaScript 的插件库 — 包含:轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等组件。...

王练
2016/11/23
15
0
javaWeb数据库动态加载全国省市区三级联动

demo源码下载地址:https://git.oschina.net/zhengweishan/GetProvinceCityArea 首先声明一下,全国省市区三级联动有很多的插件。没有必要这么麻烦的把省市区存到数据库,然后再获取。这样缺...

火龙战士
2015/04/16
0
8
引用provinces.js的三级联动

第一次写随笔 应该写的不是太好 请多多见谅 我这次是在网上发现了一个三级联动 也是给新人一个福利 这个是你需要新建个 JavaScript 文件 并复制到你新建的文件里面 2 { 3 "name": "北京市", ...

糊涂话
2018/12/20
0
0
xaboy/form-builder

form-builder PHP表单生成器,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。 表单是使用...

xaboy
2018/06/27
0
0
关于地址联动大家用什么来实现?

如题: 业务要求:需要能够实现,国家,省份,城市,地区,四级联动。后台为JAVA 我知道的主要有两种方式,一种是JS方式实现,国家,地址信息全部写在JS里,依靠JS来联动调用。 另一种是依靠...

Kent_Chen
2014/05/15
464
12

没有更多内容

加载失败,请刷新页面

加载更多

求推广,德邦快递坑人!!!!

完全没想好怎么来吐槽自己这次苦逼的德邦物流过程了,只好来记一个流水账。 从寄快递开始: 2019年1月15日从 德邦物流 微信小app上下单,截图如下: 可笑的是什么,我预约的是17号上门收件,...

o0无忧亦无怖
24分钟前
1
0
Mac Vim配置

1.升级 vim   我自己 MacBook Pro 的系统还是 10.11 ,其自带的 vim 版本为 7.3 ,我们将其升至最新版: 使用 homebrew : brew install vim --with-lua --with-override-system-vim 这将下...

Pasenger
37分钟前
0
0
vmware安装Ubuntu上不了网?上网了安装不了net-tools,无法执行ifconfig?

1.重新设置网络适配器还是不行,如下指定nat 2.还需要指定共享网络,我是在无线环境下 3.无法执行ifconfig https://packages.ubuntu.com/bionic/net-tools到这个网站下载net-tools的deb文件...

noob_chr
今天
1
0
解决SVN:E210007无法协商认证机制

svn:E210007 svn: Cannot negotiate authentication mechanism 执行下面代码即可 sudo yum install cyrus-sasl cyrus-sasl-plain cyrus-sasl-ldap...

临江仙卜算子
今天
1
0
java8的时间和`Date`的对比

java8的时间和Date的对比 java8提供了新的时间接口。相对Date,Calendar,个人感觉最大的好处是对时间操作的学习成本很低,比Calendar低。 1. LocalDate,LocalTime,LocalDateTime LocalDate 代...

北风刮的不认真了
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部