jQuery实现省市县三级联动菜单
使用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>