JSON-based jquery area linkage effect Code _jquery

Source: Internet
Author: User
The original intention of writing this thing was to be on Sina Weibo, Sina Weibo account set there is an area of options, using JS write, want to take it to intercept the code, but the disappointment is that it's JS code compression, but see the inside JSON type format design is very good, In general, we do not do any processing in the background JSON data format similar to the following
[{' Code ': 3231, ' Name ': ' Changchun '},
{' Code ': 3232, ' Name ': ' Jilin}]
If there are 10,000 regions, there will be tens of thousands of more characters, so extravagant way I think I'd give up.
Also out of this idea, it was written to use. NET output JSON in this format, as well as write a dropdown based on jquery linkage.
The main code is as follows:
JSON code:
Copy Code code as follows:

var area = ' {city3145 ': "Municipal District",
"code3145": "3179",
"city3146": "Municipal District",
"code3146": "3180",
"city3147": "Shijiazhuang City, Tangshan, Qinhuangdao Shi, Hanhan, Xingtai, Baoding, Zhangjiakou, Chengde, Cangzhou, Langfang, Hengshui",
"code3147": "3181,3182,3183,3184,3185,3186,3187,3188,3189,3190,3191",
"city3148": "Taiyuan City, Datong, Yangquan, Changzhi, Jincheng, Shuozhou, Jinzhong, Yun City, Xinzhou, Linfen, Luliang City",
"code3148": "3192,3193,3194,3195,3196,3197,3198,3199,3200,3201,3202",
"city3149": "Hohhot City, Baotou, Wuhai, Chifeng, Tongliao, Eerduosi, Holonbuyr, Bayan Nur city, Wulanchabu City, Hinggan League, Xilin, Alxa league",
"code3149": "3203,3204,3205,3206,3207,3208,3209,3210,3211,3212,3213,3214",
"city3150": "Shenyang, Dalian, Anshan, Fushun, Benxi, Dandong, Jinzhou, Yingkou, Fuxin, Liaoyang, Panjin, Tieling, Chaoyang, Huludao",
"code3150": "3215,3216,3217,3218,3219,3220,3221,3222,3223,3224,3225,3226,3227,3228",
"city3151": "Changchun, Jilin, Siping, Liaoyuan, Tonghua, Bss, Songyuan, White City, Yanbian Korean autonomous Prefecture",
"code3151": "3229,3230,3231,3232,3233,3234,3235,3236,3237",
"city3152": "Harbin City, Qiqihar, Jixi, Hegang, Shuangyashan, Daqing, Yichun, Jiamusi, Qitaihe Shi, Mudanjiang, Heihe, Suihua, daxinganling",
"code3152": "3238,3239,3240,3241,3242,3243,3244,3245,3246,3247,3248,3249,3250",
"city3153": "Municipal District", "code3153": "3251",
"city3154": "Nanjing, Wuxi, Xuzhou, Changzhou, Suzhou, Nantong, Lianyungang, Huaian, Yancheng, Yangzhou, Zhenjiang, Taizhou, Suqian",
"code3154": "3252,3253,3254,3255,3256,3257,3258,3259,3260,3261,3262,3263,3264",
"city3155": "Hangzhou city, Ningbo, Wenzhou, Jiaxing, Huzhou, Shaoxing, Jinhua, Quzhou, Zhoushan, Taizhou, Lishui",
"code3155": "3265,3266,3267,3268,3269,3270,3271,3272,3273,3274,3275",
"city3156": "Hefei, Wuhu, Bangbu, Huainan, Maanshan, Huaibei, Tongling, Anqing, Huangshan, Chuzhou, Fuyang, Suzhou, Chaohu, Liu'an, Bozhou, Chizhou, Xuancheng",
"code3156": "3276,3277,3278,3279,3280,3281,3282,3283,3284,3285,3286,3287,3288,3289,3290,3291,3292",
"city3157": "Fuzhou, Xiamen, Putian, Sanming, Quanzhou, Zhangzhou, Nanping, Longyan, Ningde",
"code3157": "3293,3294,3295,3296,3297,3298,3299,3300,3301",
"city3158": "Nanchang, Jingdezhen, Pingxiang, Jiujiang, Xinyu, Yingtan, Ganzhou, Jian, Yichun, Fuzhou, Shangrao",
"code3158": "3302,3303,3304,3305,3306,3307,3308,3309,3310,3311,3312",
"city3159": "Jinan, Qingdao, Zibo, Zaozhuang, Dongying, Yantai, Weifang, Jining, Taian, Weihai, Rizhao, Laiwu, Linyi, Dezhou, Liaocheng, Binzhou, Heze City",
"code3159": "3313,3314,3315,3316,3317,3318,3319,3320,3321,3322,3323,3324,3325,3326,3327,3328,3329",
"city3160": "Zhengzhou, Kaifeng, Luoyang, Pingdingshan, Anyang, Hebi, Xinxiang, Jiaozuo, Puyang, Xuchang, Leihe, Sanmenxia Shi, Nanyang, Shangqiu, Xinyang, Zhoukou, Zhumadian",
"code3160": "3330,3331,3332,3333,3334,3335,3336,3337,3338,3339,3340,3341,3342,3343,3344,3345,3346",
"city3161": "Wuhan City, Huangshi, Shiyan, Yichang, Xiangfan, Ezhou, Jingmen, Xiaogan, Jinzhou, Huanggang, Xianning, Suizhou, Enshi, provincial administrative units",
"code3161": "3347,3348,3349,3350,3351,3352,3353,3354,3355,3356,3357,3358,3359,3360",
"city3162": "Changsha, Zhuzhou, Xiangtan, Hengyang, Shaoyang, Yueyang, Changde, Zhangjiajie, Yiyang, Chenzhou, Yongzhou, Huaihua, Loudi, Xiangxi Tujia",
"code3162": "3361,3362,3363,3364,3365,3366,3367,3368,3369,3370,3371,3372,3373,3374",
"city3163": "Guangzhou, Shaoguan, Shenzhen, Zhuhai, Shantou, Foshan, Jiangmen, Zhanjiang, Maoming, Zhaoqing, Huizhou, Meizhou, Shanwei, Heyuan, Yangjiang, Qingyuan, Dongguan, Zhongshan, Chaozhou, Jieyang, Yunfu",
"code3163": " 3375,3376,3377,3378,3379,3380,3381,3382,3383,3384,3385,3386,3387,3388,3389,3390,3391,3392,3393,3394,3395 ",
"city3164": "Nanning, Liuzhou, Guilin, Wuzhou, Beihai, Fangchenggang, Qinzhou, Guigang, Yulin, Baise, Hezhou, Hechi, guest city, Chongzuo City",
"code3164": "3396,3397,3398,3399,3400,3401,3402,3403,3404,3405,3406,3407,3408,3409",
"city3165": "Haikou, Sanya, provincial-level administrative units",
"code3165": "3410,3411,3412",
"city3166": "Municipal District",
"code3166": "3413",
"city3167": "Cheng Du, Zigong, Panzhihua, Luzhou, Deyang, Mianyang, Guangyuan, Suining, Neijiang, Leshan, Nanchong, Meishan, Yibin, Guangan, Dazhou, Yaan, Bazhong, Ziyang, Aba, Tibetan and Qiang Autonomous Prefecture, Tibetan Autonomous Prefecture, Liangshan Yi Autonomous Prefecture ",
"code3167": " 3415,3416,3417,3418,3419,3420,3421,3422,3423,3424,3425,3426,3427,3428,3429,3430,3431,3432,3433,3434,3435 ",
"city3168": "Guiyang, Liupanshui, Zunyi, Anshun, Tongren Prefecture, southwest Guizhou Buyei and Miao Autonomous Region, Bijie Prefecture, Guizhou, southeast Miao and Dong Autonomous Prefecture, Qiannan Buyei and Miao Autonomous Prefecture",
"code3168": "3436,3437,3438,3439,3440,3441,3442,3443,3444",
"city3169": "Kunming, Qujing, Yuxi, Baoshan, Zhaotong, Lijiang, Simao, Lincang, Chuxiongzhou, Honghe, Wenshan, Xishuangbanna Dai Autonomous Prefecture, Bai zu, Dehong dai Jingpo Autonomous Prefecture, Nujiang Autonomous Prefecture , the Dêqên Tibetan Autonomous Prefecture, "
"code3169": "3445,3446,3447,3448,3449,3450,3451,3452,3453,3454,3455,3456,3457,3458,3459,3460",
"city3170": "Lasa, Changdu, Shannan, Xigazê, Nagchu, Ali Prefecture, Linzhi",
"code3170": "3461,3462,3463,3464,3465,3466,3467",
"city3171": "Xi ' an city, Tongchuan, Baoji, Xianyang, Weinan, Yanan, Hanzhong, Yulin, Ankang, Shangluo",
"code3171": "3468,3469,3470,3471,3472,3473,3474,3475,3476,3477",
"city3172": "Lanzhou City, Jiayuguan, Jinchang, Baiyin, Tianshui, Wuwei, Zhangye, Pingliang, Jiuquan, Qingyang City, Dingxi City, Longnan, Linxia Hui Autonomous Prefecture, Gannan Tibetan Autonomous Prefecture",
"code3172": "3478,3479,3480,3481,3482,3483,3484,3485,3486,3487,3488,3489,3490,3491",
"city3173": "Xining City, Haidong Prefecture, Haibei Tibetan Autonomous Prefecture, Huangnan Tibetan Autonomous Prefecture, Hainan Tibetan Autonomous Prefecture, golog Tibetan Autonomous Prefecture, Yushu Tibetan Autonomous Prefecture, sea Simon Haixi Tibetan Autonomous Prefecture",
"code3173": "3492,3493,3494,3495,3496,3497,3498,3499",
"city3174": "Yinchuan, Shizuishan, Wuzhong, Guyuan, Zhongwei City",
"code3174": "3500,3501,3502,3503,3504",
"city3175": "Urumqi, Karamay, Turpan, Hami, Changji Hui Autonomous Prefecture, Bortala Mongol Autonomous Prefecture, Bainguo, Aksu, Kizilsu Kirgiz Zizhizhou, Kashgar, Hotan, Isahasak, Tacheng Prefecture, Altay Prefecture , the Provincial administrative Unit ",
"code3175": "3505,3506,3507,3508,3509,3510,3511,3512,3513,3514,3515,3516,3517,3518,3519",
"city3176": "",
"code3176": "",
"city3177": "",
"code3177": "",
"city3178": "",
"code3178": "",
Provinces: "Beijing, Tianjin City, Hebei Province, Shanxi province, Inner Mongolia Autonomous Region, Liaoning Province, Jilin Province, Heilongjiang Province, Shanghai city, Jiangsu Province, Zhejiang Province, Anhui Province, Fujian Province, Jiangxi Province, Shandong Province, Henan Province, Hubei province, Hunan province, Guangdong province, Guangxi Zhuang Autonomous Region, Hainan Province, Chongqing, Sichuan Province , Guizhou Province, Yunnan province, Tibet Autonomous Region, Shaanxi Province, Gansu province, Qinghai province, Ningxia Hui Autonomous Region, Xinjiang Uygur Autonomous Region, Taiwan Province, Hong Kong Special Administrative Region, Macao Special Administrative Region,
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,3 169,3170,3171,3172,3173,3174,3175,3176,3177,3178 "}";

jquery Code, key code
Copy Code code as follows:

$ (function () {
Get the JSON object
var jsonobj = eval (' + area + ') ');
Province number
var provcodes = jsonobj.provcodes;
Province numbered Array
var Provcodesarray = Provcodes.split (', ');
Number of provincial numbers
var provcodeslength = provcodesarray.length;
Province name
var provinces = jsonobj.provinces;
var Provincesarray = Provinces.split (', ');
var provhtml = ' <option value= ' > Please choose </option> ';
Bound Provinces
for (Var i=0;i<provcodeslength;i++) {
provhtml + = ' <option value= ' ' +provcodesarray[i]+ ' > ' +provincesarray[i]+ ' </option> ';
}
$ ("#province"). Append (provhtml);
Select Provincial City Load subordinate
$ ("#province"). Change (function () {
var cityhtml = ' <option value= ' > Please choose </option> ';
var Provcode = $ (this). Val (); Number of Provincial
Exit if the selection is empty
if (provcode== "") {
$ ("#city"). Empty (). append (cityhtml);
return;
}
var prov = "City" +provcode; City-level name
var code = "Code" +PROVCODE; City level number
var Provarray = Jsonobj[code].split (', '); City-level name array
var prolength = provarray.length;
var Cityarray = Jsonobj[prov].split (', '); City-level numbering array
Binding City Level
for (Var i=0;i<prolength;i++) {
cityhtml + = ' <option value= ' ' +provarray[i]+ ' > ' +cityarray[i]+ ' </option> ';
}
$ ("#city"). Empty (). append (cityhtml);
});
});

Complete code:
Copy Code code as follows:

<! 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: Golden Millennium
-->
<script src= "Jquery1.3.2.js" > </script>
<script src= "Area.js" ></script>
<script>
</script>
<script>
The code above can be posted.
</script>
</HEAD>
<BODY>
Area:
<select name= "province" id= "province" ></select>
<select name= "City" id= "City" >
<option value= "" > Please select </option>
</select>
</BODY>
</HTML>

The next thing is. NET code data JSON,
Copy Code code as follows:

<summary>
Output JSON data
</summary>
<remarks>
<para>Date:2011-07-01</para>
<para>author: Golden Millennium </para>
</remarks>
<returns></returns>
public string Writejson ()
{
Take all the data in the database
ilist<areatye> arealist = Getareatypelistall ();
Take the provincial collection, at_parentid=1.
var Provnameparentid = from area to Arealist where area. At_parentid = 1 Select area;
All the data
var arealinq = from area to arealist Select area;
Screening, screening of provincial collections, screening adjustment At_parentid = = 0
var Areawhereparentid = arealinq.where (m => m.at_parentid = = 0). ToList ();
Provincial name format: "Hunan Province, Zhejiang Province, Beijing,..."
String provname = String. Join (",", Areawhereparentid.select (M => m.at_name). ToArray ());
Provincial numbering format: "1,2,3,..."
String Provcode = String. Join (",", Areawhereparentid.select (M => m.at_id). ToArray ());
Number of Provinces
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 ();
}

The area table is generally designed to
AT_ID: Uniquely identifies the corresponding code within the JSON
At_name: Local Chinese name
At_parentid: Parent ID
At_level: Level, 1 for provincial, 2 for city level
The above code for reference only, code quality and efficiency can not be guaranteed, use the consequences of the appearance of the ego.
Hope to get everyone's valuable advice and a better solution-level approach

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.