js城市三级联动效果

最新推荐文章于 2020-06-03 00:31:52 发布

weixin_34109408

最新推荐文章于 2020-06-03 00:31:52 发布

阅读量112

点赞数

原文链接：https://my.oschina.net/tbd/blog/683009

版权

为什么80%的码农都做不了架构师？>>>

重点就是全国城市的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>

转载于:https://my.oschina.net/tbd/blog/683009