您的位置：首页 > Web前端 > JQuery

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

2012-03-03 12:56 871 查看
使用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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航