jQuery实现省市县三级联动菜单

最新推荐文章于 2024-07-26 03:31:50 发布

程序员Monkey

最新推荐文章于 2024-07-26 03:31:50 发布

阅读量9.7w

点赞数 1

分类专栏： JS+Jquery 文章标签： jquery xhtml 金山 function 商城

本文链接：https://blog.csdn.net/harderxin/article/details/7314763

版权

JS+Jquery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

使用JQuery实现的全国省市县三级联动菜单，没有使用ajax，数据也不是从数据库中动态读取出来的，就是简单的jquery，方便实用，实现效果如下图：

1、定义数据，我们可以将省、市、县定义为一个js文件中，分别为三个数组存放，下面是举例，所以只列出部分省、市、县，全国和海外全部数据见我的资源文件:省市县三级联动菜单完整项目中的provincesdata.js文件，资源下载地址：http://download.csdn.net/detail/harderxin/8311607

我们定义一个js文件，用来存放省市县数据:provincesdata.js

//定义省级数据,为一维数组
var GP =['安徽','澳门','北京']
//定义市级数据，为二维数组
var GT = [
	['合肥','安庆','蚌埠','亳州','巢湖','池州','滁州','阜阳','淮北','淮南','黄山','六安','马鞍山','宿州','铜陵','芜湖','宣城'],
	['澳门'],
	['昌平','朝阳','崇文','大兴','东城','房山','丰台','海淀','怀柔','门头沟','密云','平谷','石景山','顺义','通州','西城','宣武','延庆']
]
//定义县级数据，为三维数组
var GC =
[
	[
		['长丰','肥东','肥西','合肥市'],
		['安庆市','枞阳','怀宁','潜山','宿松','太湖','桐城','望江','岳西'],
		['蚌埠市','固镇','怀远','五河'],
		['亳州市','利辛','蒙城','涡阳'],
		['巢湖市','含山','和县','庐江','无为'],
		['池州市','东至','青阳','石台'],
		['滁州市','定远','凤阳','来安','明光','全椒','天长'],
		['阜南','阜阳市','界首','临泉','太和','颍上'],
		['淮北市','濉溪'],
		['凤台','淮南市'],
		['黄山市','祁门','歙县','休宁','黟县'],
		['霍邱','霍山','金寨','六安市','寿县','舒城'],
		['当涂','马鞍山市'],
		['砀山','灵璧','泗县','宿州市','萧县'],
		['铜陵市','铜陵县'],
		['繁昌','南陵','芜湖市','芜湖县'],
		['广德','绩溪','泾县','旌德','郎溪','宁国','宣城市']
	],
	[
		['澳门']
	],
	[
		['昌平'],
		['朝阳'],
		['崇文'],
		['大兴'],
		['东城'],
		['房山'],
		['丰台'],
		['海淀'],
		['怀柔'],
		['门头沟'],
		['密云'],
		['平谷'],
		['石景山'],
		['顺义'],
		['通州'],
		['西城'],
		['宣武'],
		['延庆']
	]
]

2、编写jquery城市联动插件：jquery.ProvinceCity.js文件

$.fn.ProvinceCity = function(){
	var _self = this;
	//定义3个默认值
	_self.data("province",["请选择", "请选择"]);
	_self.data("city1",["请选择", "请选择"]);
	_self.data("city2",["请选择", "请选择"]);
	//插入3个空的下拉框
	_self.append("<select></select>");
	_self.append("<select></select>");
	_self.append("<select></select>");
	//分别获取3个下拉框
	var $sel1 = _self.find("select").eq(0);
	var $sel2 = _self.find("select").eq(1);
	var $sel3 = _self.find("select").eq(2);
	//默认省级下拉
	if(_self.data("province")){
		$sel1.append("<option value='"+_self.data("province")[1]+"'>"+_self.data("province")[0]+"</option>");
	}
	$.each( GP , function(index,data){
		$sel1.append("<option value='"+data+"'>"+data+"</option>");
	});
	//默认的1级城市下拉
	if(_self.data("city1")){
		$sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>");
	}
	//默认的2级城市下拉
	if(_self.data("city2")){
		$sel3.append("<option value='"+_self.data("city2")[1]+"'>"+_self.data("city2")[0]+"</option>");
	}
	//省级联动 控制
	var index1 = "" ;
	$sel1.change(function(){
		//清空其它2个下拉框
		$sel2[0].options.length=0;
		$sel3[0].options.length=0;
		index1 = this.selectedIndex;
		if(index1==0){	//当选择的为 “请选择” 时
			if(_self.data("city1")){
				$sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>");
			}
			if(_self.data("city2")){
				$sel3.append("<option value='"+_self.data("city2")[1]+"'>"+_self.data("city2")[0]+"</option>");
			}
		}else{
			$.each( GT[index1-1] , function(index,data){
				$sel2.append("<option value='"+data+"'>"+data+"</option>");
			});
			$.each( GC[index1-1][0] , function(index,data){
				$sel3.append("<option value='"+data+"'>"+data+"</option>");
			})
		}
	}).change();
	//1级城市联动 控制
	var index2 = "" ;
	$sel2.change(function(){
		$sel3[0].options.length=0;
		index2 = this.selectedIndex;
		$.each( GC[index1-1][index2] , function(index,data){
			$sel3.append("<option value='"+data+"'>"+data+"</option>");
		})
	});
	return _self;
};

3、编写我们的测试页面，导入我们的省市县数据js：provincesdata.js和jquery联动插件js：jquery.ProvinceCity.js,还有一个很重要的jquery插件：jquery-1.6.min.js,定义一个div文件，引入我们的ProvinceCity方法即可：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <!--设置select样式-->
  <style>
	#test select{
		width:100px;
		margin-left:20px;
	}
  </style>
  <!--引入jquery插件-->
  <script src="jquery-1.6.min.js" type="text/javascript"></script>
  <!--引入我们编写的省市县jquery插件-->
  <script src="jquery.ProvinceCity.js" type="text/javascript"></script>
  <!--引入我们编写的js省市县基础数据-->
  <script src="provincesdata.js" type="text/javascript"></script>
  <script>
	//调用插件
	$(function(){
		$("#test").ProvinceCity();
	});
  </script>

 </head>

 <body>
  <div id="test"></div>
 </body>
</html>

查看html文件，即可看到效果,当我们项目需要用到的时候，我们可以把下面几个文件当做插件来使用，直接在项目中添加即可，如果需要相应的数据，在provincedata.js中进行相应的添加和修改即可，非常方便

 <!--引入jquery插件-->
  <script src="jquery-1.6.min.js" type="text/javascript"></script>
  <!--引入我们编写的省市县jquery插件-->
  <script src="jquery.ProvinceCity.js" type="text/javascript"></script>
  <!--引入我们编写的js省市县基础数据-->
  <script src="provincesdata.js" type="text/javascript"></script>