基于json的jquery地区联动效果代码_jquery-js教程-PHP中文網

写这个东西的初衷是来之于新浪微博，在新浪微博帐号设置里面有个地区的选项，使用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 = '请选择'; 
//绑定省份 
for(var i=0;iprovhtml += ''+provincesArray[i]+''; 
} 
$("#province").append(provhtml); 
//选择省级市加载下级 
$("#province").change(function(){ 
var cityhtml = '请选择'; 
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;icityhtml += ''+cityArray[i]+''; 
} 
$("#city").empty().append(cityhtml); 
}); 
}); 

完整代码：

复制代码代码如下:

New Document

<script> <BR></script>
<script> <BR>//上面的代码贴过来即可 <BR></script>

地区:

接下来就是.NET代码数据json啦，

复制代码代码如下:

 
///  
/// 输出json数据 
///  
///  
/// Date:2011-07-01 
/// Author:太平盛世 
///  
///  
public string WriteJson() 
{ 
//取数据库里面的所有的数据 
Ilist 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(); 
for(var i=0;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为市级
以上代码仅供参考，代码质量和效率无法得到保证，使用出现的后果自负..
希望能得到大家的宝贵意见和更好的解决方案级方法