文档章节

js城市三级联动效果

透笔度
 透笔度
发布于 2016/05/27 17:30
字数 808
阅读 240
收藏 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>

© 著作权归作者所有

共有 人打赏支持
透笔度
粉丝 70
博文 128
码字总数 235452
作品 0
朝阳
前端工程师
javaWeb数据库动态加载全国省市区三级联动

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

火龙战士
2015/04/16
0
8
xaboy/form-builder

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

xaboy
06/27
0
0
SugarCRM之在EditViews中实现三级联动

在《SugarCRM之在Views中调用js》中已经说明如何在Views中添加js代码,但是在实际需求中还是不够的。 (1) 在页面中某个特定字段加入html代码,并触发相应的js方法,当然具体使用哪些html代...

JTurbo_Wu
2014/02/22
0
0
jQuery 插件库--jQuery Widgets

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

一个路人甲
2016/11/22
4.7K
2
laden666666/my-picker

my-picker 高仿IOS的PickerView的JavaScript插件,3D形式的滚轮选择器,同时支持最多三级联动的选择效果,支持pc端和移动端两种平台浏览器。目前仅支持chrome及移动端默认浏览器,后续增加i...

laden666666
05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

NIO与BIO的区别、NIO的运行原理和并发使用场景

NIO(Non-blocking I/O,在Java领域,也称为New I/O),是一种同步非阻塞的I/O模型,也是I/O多路复用的基础,已经被越来越多地应用到大型应用服务器,成为解决高并发与大量连接、I/O处理问题的...

Java干货分享
39分钟前
1
0
Makefile 学习 1 - 基于若干 Blog 的汇总

基于若干 Blog 汇总的 makefile 教程 陈皓 https://blog.csdn.net/haoel/article/details/2886 Makefile 基础知识 1. 什么是 Makefile? 规定软件工程的编译规则。一个工程中的源文件,其按类...

公孙衍
53分钟前
1
0
72.告警系统邮件引擎 运行告警系统

20.23/20.24/20.25 告警系统邮件引擎 20.26 运行告警系统 20.23/20.24/20.25 告警系统邮件引擎 邮件首先要有一个mail.py,以下。 因为我们之前zabbix的时候做过,就可以直接拷贝过来 mail.s...

王鑫linux
今天
1
0
09-利用思维导图梳理JavaSE-

09-利用思维导图梳理JavaSE-Java IO流 主要内容 1.Java IO概述 1.1.定义 1.2.输入流 - InputStream 1.3.输出流 - OutputStream 1.4.IO流的分类 1.5.字符流和字节流 2.InputStream类 2.1.File...

飞鱼说编程
今天
3
0
Spring Cloud 微服务的那点事

在详细的了解SpringCloud中所使用的各个组件之前,我们先了解下微服务框架的前世今生。 单体架构 在网站开发的前期,项目面临的流量相对较少,单一应用可以实现我们所需要的功能,从而减少开...

我是你大哥
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部