基于json的jquery地区联动效果代码
基于json的jquery地区联动效果代码
发布时间:2016-12-30 来源:查字典编辑
摘要:写这个东西的初衷是来之于新浪微博,在新浪微博帐号设置里面有个地区的选项,使用js写的,想把它的代码给截获下来,可是失望的是它的js代码压缩了...

写这个东西的初衷是来之于新浪微博,在新浪微博帐号设置里面有个地区的选项,使用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="">

<>

<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为市级

以上代码仅供参考,代码质量和效率无法得到保证,使用出现的后果自负..

希望能得到大家的宝贵意见和更好的解决方案级方法

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类