基于json的jquery地区联动效果代码

ttx9n

贴一个基于jquery联动的代码，相信这样的代码有一大把，就当是jquery的练手吧 写这个东西的初衷是来之于新浪微博，在新浪微博帐号设置里面有个地区的选项，使用js写的，想把它的代码给截获下来，可是失望的是它的js代码压缩了，不过看到的里面json类型格式设计的挺好的，一般我们后台未做任何处理的json数据格式类似以下这样子的
[{"Code":3231,"Name":"长春市"},
{"Code":3232,"Name":"吉林市}]
如果有一万个地区，会多出几万个字符，这么奢侈的做法我想我还是放弃了吧，
也是出于这种想法，就写了使用.NET输出此种格式的json，以及写了基于jquery联动的下拉。
主要代码如下：
json代码:
复制代码 代码如下:
var area = '{"city3145":"市辖区",
"code3145":"3179",
"city3146":"市辖区",
"code3146":"3180",
"city3147":"石家庄市,唐山市,秦皇岛市,邯郸市,邢台市,保定市,张家口市,承德市,沧州市,廊坊市,衡水市",
"code3147":"3181,3182,3183,3184,3185,3186,3187,3188,3189,3190,3191",
"city3148":"太原市,大同市,阳泉市,长治市,晋城市,朔州市,晋中市,运城市,忻州市,临汾市,吕梁市",
"code3148":"3192,3193,3194,3195,3196,3197,3198,3199,3200,3201,3202",
"city3149":"呼和浩特市,包头市,乌海市,赤峰市,通辽市,鄂尔多斯市,呼伦贝尔市,巴彦淖尔市,乌兰察布市,兴安盟,锡林郭勒盟,阿拉善盟",
"code3149":"3203,3204,3205,3206,3207,3208,3209,3210,3211,3212,3213,3214",
"city3150":"沈阳市,大连市,鞍山市,抚顺市,本溪市,丹东市,锦州市,营口市,阜新市,辽阳市,盘锦市,铁岭市,朝阳市,葫芦岛市",
"code3150":"3215,3216,3217,3218,3219,3220,3221,3222,3223,3224,3225,3226,3227,3228",
"city3151":"长春市,吉林市,四平市,辽源市,通化市,白山市,松原市,白城市,延边朝鲜族自治州",
"code3151":"3229,3230,3231,3232,3233,3234,3235,3236,3237",
"city3152":"哈尔滨市,齐齐哈尔市,鸡西市,鹤岗市,双鸭山市,大庆市,伊春市,佳木斯市,七台河市,牡丹江市,黑河市,绥化市,大兴安岭地区",
"code3152":"3238,3239,3240,3241,3242,3243,3244,3245,3246,3247,3248,3249,3250",
"city3153":"市辖区", "code3153":"3251",
"city3154":"南京市,无锡市,徐州市,常州市,苏州市,南通市,连云港市,淮安市,盐城市,扬州市,镇江市,泰州市,宿迁市",
"code3154":"3252,3253,3254,3255,3256,3257,3258,3259,3260,3261,3262,3263,3264",
"city3155":"杭州市,宁波市,温州市,嘉兴市,湖州市,绍兴市,金华市,衢州市,舟山市,台州市,丽水市",
"code3155":"3265,3266,3267,3268,3269,3270,3271,3272,3273,3274,3275",
"city3156":"合肥市,芜湖市,蚌埠市,淮南市,马鞍山市,淮北市,铜陵市,安庆市,黄山市,滁州市,阜阳市,宿州市,巢湖市,六安市,亳州市,池州市,宣城市",
"code3156":"3276,3277,3278,3279,3280,3281,3282,3283,3284,3285,3286,3287,3288,3289,3290,3291,3292",
"city3157":"福州市,厦门市,莆田市,三明市,泉州市,漳州市,南平市,龙岩市,宁德市",
"code3157":"3293,3294,3295,3296,3297,3298,3299,3300,3301",
"city3158":"南昌市,景德镇市,萍乡市,九江市,新余市,鹰潭市,赣州市,吉安市,宜春市,抚州市,上饶市",
"code3158":"3302,3303,3304,3305,3306,3307,3308,3309,3310,3311,3312",
"city3159":"济南市,青岛市,淄博市,枣庄市,东营市,烟台市,潍坊市,济宁市,泰安市,威海市,日照市,莱芜市,临沂市,德州市,聊城市,滨州市,荷泽市",
"code3159":"3313,3314,3315,3316,3317,3318,3319,3320,3321,3322,3323,3324,3325,3326,3327,3328,3329",
"city3160":"郑州市,开封市,洛阳市,平顶山市,安阳市,鹤壁市,新乡市,焦作市,濮阳市,许昌市,漯河市,三门峡市,南阳市,商丘市,信阳市,周口市,驻马店市",
"code3160":"3330,3331,3332,3333,3334,3335,3336,3337,3338,3339,3340,3341,3342,3343,3344,3345,3346",
"city3161":"武汉市,黄石市,十堰市,宜昌市,襄樊市,鄂州市,荆门市,孝感市,荆州市,黄冈市,咸宁市,随州市,恩施土家族苗族自治州,省直辖行政单位",
"code3161":"3347,3348,3349,3350,3351,3352,3353,3354,3355,3356,3357,3358,3359,3360",
"city3162":"长沙市,株洲市,湘潭市,衡阳市,邵阳市,岳阳市,常德市,张家界市,益阳市,郴州市,永州市,怀化市,娄底市,湘西土家族苗族自治州",
"code3162":"3361,3362,3363,3364,3365,3366,3367,3368,3369,3370,3371,3372,3373,3374",
"city3163":"广州市,韶关市,深圳市,珠海市,汕头市,佛山市,江门市,湛江市,茂名市,肇庆市,惠州市,梅州市,汕尾市,河源市,阳江市,清远市,东莞市,中山市,潮州市,揭阳市,云浮市",
"code3163":"3375,3376,3377,3378,3379,3380,3381,3382,3383,3384,3385,3386,3387,3388,3389,3390,3391,3392,3393,3394,3395",
"city3164":"南宁市,柳州市,桂林市,梧州市,北海市,防城港市,钦州市,贵港市,玉林市,百色市,贺州市,河池市,来宾市,崇左市",
"code3164":"3396,3397,3398,3399,3400,3401,3402,3403,3404,3405,3406,3407,3408,3409",
"city3165":"海口市,三亚市,省直辖县级行政单位",
"code3165":"3410,3411,3412",
"city3166":"市辖区",
"code3166":"3413",
"city3167":"成都市,自贡市,攀枝花市,泸州市,德阳市,绵阳市,广元市,遂宁市,内江市,乐山市,南充市,眉山市,宜宾市,广安市,达州市,雅安市,巴中市,资阳市,阿坝藏族羌族自治州,甘孜藏族自治州,凉山彝族自治州",
"code3167":"3415,3416,3417,3418,3419,3420,3421,3422,3423,3424,3425,3426,3427,3428,3429,3430,3431,3432,3433,3434,3435",
"city3168":"贵阳市,六盘水市,遵义市,安顺市,铜仁地区,黔西南布依族苗族自治州,毕节地区,黔东南苗族侗族自治州,黔南布依族苗族自治州",
"code3168":"3436,3437,3438,3439,3440,3441,3442,3443,3444",
"city3169":"昆明市,曲靖市,玉溪市,保山市,昭通市,丽江市,思茅市,临沧市,楚雄彝族自治州,红河哈尼族彝族自治州,文山壮族苗族自治州,西双版纳傣族自治州,大理白族自治州,德宏傣族景颇族自治州,怒江傈僳族自治州,迪庆藏族自治州",
"code3169":"3445,3446,3447,3448,3449,3450,3451,3452,3453,3454,3455,3456,3457,3458,3459,3460",
"city3170":"拉萨市,昌都地区,山南地区,日喀则地区,那曲地区,阿里地区,林芝地区",
"code3170":"3461,3462,3463,3464,3465,3466,3467",
"city3171":"西安市,铜川市,宝鸡市,咸阳市,渭南市,延安市,汉中市,榆林市,安康市,商洛市",
"code3171":"3468,3469,3470,3471,3472,3473,3474,3475,3476,3477",
"city3172":"兰州市,嘉峪关市,金昌市,白银市,天水市,武威市,张掖市,平凉市,酒泉市,庆阳市,定西市,陇南市,临夏回族自治州,甘南藏族自治州",
"code3172":"3478,3479,3480,3481,3482,3483,3484,3485,3486,3487,3488,3489,3490,3491",
"city3173":"西宁市,海东地区,海北藏族自治州,黄南藏族自治州,海南藏族自治州,果洛藏族自治州,玉树藏族自治州,海西蒙古族藏族自治州",
"code3173":"3492,3493,3494,3495,3496,3497,3498,3499",
"city3174":"银川市,石嘴山市,吴忠市,固原市,中卫市",
"code3174":"3500,3501,3502,3503,3504",
"city3175":"乌鲁木齐市,克拉玛依市,吐鲁番地区,哈密地区,昌吉回族自治州,博尔塔拉蒙古自治州,巴音郭楞蒙古自治州,阿克苏地区,克孜勒苏柯尔克孜自治州,喀什地区,和田地区,伊犁哈萨克自治州,塔城地区,阿勒泰地区,省直辖行政单位",
"code3175":"3505,3506,3507,3508,3509,3510,3511,3512,3513,3514,3515,3516,3517,3518,3519",
"city3176":"",
"code3176":"",
"city3177":"",
"code3177":"",
"city3178":"",
"code3178":"",
provinces:"北京市,天津市,河北省,山西省,内蒙古自治区,辽宁省,吉林省,黑龙江省,上海市,江苏省,浙江省,安徽省,福建省,江西省,山东省,河南省,湖北省,湖南省,广东省,广西壮族自治区,海南省,重庆市,四川省,贵州省,云南省,西藏自治区,陕西省,甘肃省,青海省,宁夏回族自治区,新疆维吾尔自治区,台湾省,香港特别行政区,澳门特别行政区",
provcodes:"3145,3146,3147,3148,3149,3150,3151,3152,3153,3154,3155,3156,3157,3158,3159,3160,3161,3162,3163,3164,3165,3166,3167,3168,3169,3170,3171,3172,3173,3174,3175,3176,3177,3178"}';

jquery代码，关键代码
复制代码 代码如下:
$(function(){
//取得json对象
var jsonobj = eval('('+ area +')');
//省编号
var provcodes = jsonobj.provcodes;
//省编号数组
var provcodesArray = provcodes.split(',');
//省编号个数
var provcodesLength = provcodesArray.length;
//省名称
var provinces = jsonobj.provinces;
var provincesArray = provinces.split(',');
var provhtml = '<option value="">请选择</option>';
//绑定省份
for(var i=0;i<provcodesLength;i++){
provhtml += '<option value="'+provcodesArray[i]+'">'+provincesArray[i]+'</option>';
}
$("#province").append(provhtml);
//选择省级市加载下级
$("#province").change(function(){
var cityhtml = '<option value="">请选择</option>';
var provcode = $(this).val(); //省级的编号
//如果选择的是空则退出
if(provcode==""){
$("#city").empty().append(cityhtml);
return ;
}
var prov = "city"+provcode; //市级名称
var code = "code"+provcode; //市级编号
var provArray = jsonobj[code].split(','); //市级名称数组
var prolength = provArray.length;
var cityArray = jsonobj[prov].split(','); //市级编号数组
//绑定市级
for(var i=0;i<prolength;i++){
cityhtml += '<option value="'+provArray[i]+'">'+cityArray[i]+'</option>';
}
$("#city").empty().append(cityhtml);
});
});

完整代码：
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<!--
data:2011-07-1
Author:太平盛世
-->
<script src="jquery1.3.2.js"> </script>
<script src="area.js"></script>
<script>
</script>
<script>
//上面的代码贴过来即可
</script>
</HEAD>
<BODY>
地区:
<select name="province" id="province"></select>
<select name="city" id="city">
<option value="">请选择</option>
</select>
</BODY>
</HTML>

接下来就是.NET代码数据json啦，
复制代码 代码如下:
/// <summary>
/// 输出json数据
/// </summary>
/// <remarks>
/// <para>Date:2011-07-01</para>
/// <para>Author:太平盛世</para>
/// </remarks>
/// <returns></returns>
public string WriteJson()
{
//取数据库里面的所有的数据
Ilist<AreaTye> areaList = GetAreaTypeListAll();
//取省级集合，AT_ParentId=1的
//var provNameParentId = from area in areaList where area.AT_ParentId == 1 select area;
//所有的数据
var areaLinq = from area in areaList select area;
//筛选，筛选出省级集合，筛选调整 AT_ParentId == 0
var areaWhereParentId = areaLinq.Where(m => m.AT_ParentId == 0).ToList();
//省级名称 格式:"湖南省,浙江省,北京市,..."
string provName = string.Join(",", areaWhereParentId.Select(m => m.AT_Name).ToArray());
//省级编号 格式:"1,2,3,..."
string provCode = string.Join(",", areaWhereParentId.Select(m => m.AT_Id).ToArray());
//省级数量
int num = areaWhereParentId.Count();
var jsonstr = new StringBuilder();
jsonstr.Append("{");
var areaCityList = new List<AreaType>();
for(var i=0;i<num;i++)
{
var areaType = new AreaType();
areaType = areaWhereParentId[i] ;
int id = areaType.AT_Id;
areaCityList = areaLinq.Where(m => m.AT_ParentId == id).ToList();
var cityName = string.Join(",", areaCityList.Select(m => m.AT_Name).ToArray());
var cityCode = string.Join(",", areaCityList.Select(m => m.AT_Id).ToArray());
jsonstr.Append("\"");
jsonstr.Append("city");
jsonstr.Append(areaType.AT_Id);
jsonstr.Append("\"");
jsonstr.Append(":");
jsonstr.Append("\"");
jsonstr.Append(cityName);
jsonstr.Append("\"");
jsonstr.Append(",");
jsonstr.Append("\"");
jsonstr.Append("code");
jsonstr.Append(areaType.AT_Id);
jsonstr.Append("\"");
jsonstr.Append(":");
jsonstr.Append("\"");
jsonstr.Append(cityCode);
jsonstr.Append("\"");
jsonstr.Append(",");
}
jsonstr.Append("provinces:");
jsonstr.Append("\"");
jsonstr.Append(provName);
jsonstr.Append("\"");
jsonstr.Append(",");
jsonstr.Append("provcodes:");
jsonstr.Append("\"");
jsonstr.Append(provCode);
jsonstr.Append("\"");
jsonstr.Append("}");
return jsonstr.ToString();
}

地区表大致设计为
AT_Id :唯一标识,json里面对应的code
AT_Name : 地区中文名
AT_ParentId :父级id
AT_Level:级别,1为省级，2为市级
以上代码仅供参考，代码质量和效率无法得到保证，使用出现的后果自负..
希望能得到大家的宝贵意见和更好的解决方案级方法

thywok

哈哈哈哈哈哈

ppwxcg

谢谢小Y分享

cxst1h57

女生看了弄丢了卡萨诺的卡洛斯

5vulod

天天源码社区论坛

locopy

这个源码不错啊

123456

为全额万千瓦

6q8s6p21

激动人心，无法言表！

fiyeid

挺不错的东西

a971560

额风风风微风微风违法