基于json的jquery地区联动探索
贴一个基于jquery联动的代码，相信这样的代码有一大把，就当是jquery的练手吧, 写这个东西的初衷是来之于新浪微博，在新浪微博帐号设置里面有个地区的选项，使用js写的，想把它的代码给截获下来，可是失望的是它的js代码压缩了，不过看到的里面json类型格式设计的挺好的，一般我们后台未做任何处理的json数据格式类似以下这样子的 [{"Code":3231,"Name":"长春市"}, {"Code":3232,"Name":"吉林市}]
如果有一万个地区，会多出几万个字符，这么奢侈的做法我想我还是放弃了吧， 也是出于这种想法，就写了使用.NET输出此种格式的json，以及写了基于jquery联动的下拉。 主要代码如下：
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); }); });
完整代码：
/// <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为市级
以上代码仅供参考，代码质量和效率无法得到保证，使用出现的后果自负..
希望能得到大家的宝贵意见和更好的解决方案级方法
