js城市三級聯動效果

時間 2019-11-09
原文原文鏈接
重點就是全國城市的json數據，邏輯就是簡單的循環查找和返回對應索引。javascript
加入變換事件的回調處理接口。css
部分代碼，運行前須要加入json格式城市數據便可：java
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。