Jquery实现省市级联效果一

最新推荐文章于 2022-05-31 17:10:22 发布

幸福的小木鱼

最新推荐文章于 2022-05-31 17:10:22 发布

阅读量1.4k

点赞数

分类专栏： Jquery 文章标签： jquery function xhtml html

本文链接：https://blog.csdn.net/lin_lujian/article/details/6948308

版权

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="jquery-1[1].2.6.js" type="text/javascript"></script>
  <script src="jquery.provincesCity.js" type="text/javascript"></script>
 <script>
/********** 省级数据 **********/
var GP =['北京','广东','海外'];
/********** 市级数据 **********/
var GT = [
	['北京1','北京2'],
	['广东1','广东2','广东3'],
	['阿根廷1','埃及1']
];
/********** 市二级数据 **********/
var GC =[
	[
		['北京11','北京12','北京13'],
		['北京21','北京22']
	],
	[
		['广东11','广东12','广东13'],
		['广东21','广东22'],
		['广东31']
	],
	[
		['阿根廷1'],
		['埃及1']
	]
];

//调用插件
$(function(){
	$("#test").ProvinceCity();
});
 </script>

 <style>
	#test select{
		width:100px;
		margin-left:20px;
	}
 </style>
</head>
<body>
	<div id="test"></div>
</body>
</html>

/**
 * jQuery :  城市联动插件
 * @author   XiaoDong <cssrain@gmail.com>
 *			 http://www.cssrain.cn
 * @example  $("#test").ProvinceCity();
 * @params   暂无
 */
$.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;
};

幸福的小木鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现省市级联效果一

/********** 省级数据 **********/var GP =['北京','广东','海外'];/********** 市级数据 **********/var GT = [ ['北京1','北京2'], ['广东1','广东2','广东3'], ['阿根廷1','埃及1']];/********** 市二级数据 **********/var GC =[ [ ['北
复制链接

扫一扫