貼一個基于jquery聯動的代碼，相信這樣的代碼有一大把，就當是jquery的練手吧,
寫這個東西的初衷是來之于新浪微博，在新浪微博帳號設置里面有個地區的選項，使用js寫的，想把它的代碼給截獲下來，可是失望的是它的js代碼壓縮了，不過看到的里面json類型格式設計的挺好的，一般我們后臺未做任何處理的json數據格式類似以下這樣子的
[{"Code":3231,"Name":"長春市"},
{"Code":3232,"Name":"吉林市}]

如果有一萬個地區，會多出幾萬個字符，這么奢侈的做法我想我還是放棄了吧，
也是出于這種想法，就寫了使用.NET輸出此種格式的json，以及寫了基于jquery聯動的下拉。
主要代碼如下：

json代碼:

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啦，

.net代碼 /// <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為市級

以上代碼僅供參考，代碼質量和效率無法得到保證，使用出現的后果自負..

希望能得到大家的寶貴意見和更好的解決方案級方法

轉載于:https://www.cnblogs.com/strugglesMen/archive/2011/07/01/2095904.html

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的基于json的jquery地区联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。