<!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; };
Jquery实现省市级联效果一
最新推荐文章于 2021-09-14 11:42:18 发布
1773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
