基于json的jquery地區(qū)聯(lián)動(dòng)效果代碼
更新時(shí)間：2011年07月06日 00:46:35 作者：
貼一個(gè)基于jquery聯(lián)動(dòng)的代碼，相信這樣的代碼有一大把，就當(dāng)是jquery的練手吧
寫(xiě)這個(gè)東西的初衷是來(lái)之于新浪微博，在新浪微博帳號(hào)設(shè)置里面有個(gè)地區(qū)的選項(xiàng)，使用js寫(xiě)的，想把它的代碼給截獲下來(lái)，可是失望的是它的js代碼壓縮了，不過(guò)看到的里面json類(lèi)型格式設(shè)計(jì)的挺好的，一般我們后臺(tái)未做任何處理的json數(shù)據(jù)格式類(lèi)似以下這樣子的
[{"Code":3231,"Name":"長(zhǎng)春市"},
{"Code":3232,"Name":"吉林市}]
如果有一萬(wàn)個(gè)地區(qū)，會(huì)多出幾萬(wàn)個(gè)字符，這么奢侈的做法我想我還是放棄了吧，
也是出于這種想法，就寫(xiě)了使用.NET輸出此種格式的json，以及寫(xiě)了基于jquery聯(lián)動(dòng)的下拉。
主要代碼如下：
json代碼:
var area = '{"city3145":"市轄區(qū)",
"code3145":"3179",
"city3146":"市轄區(qū)",
"code3146":"3180",
"city3147":"石家莊市,唐山市,秦皇島市,邯鄲市,邢臺(tái)市,保定市,張家口市,承德市,滄州市,廊坊市,衡水市",
"code3147":"3181,3182,3183,3184,3185,3186,3187,3188,3189,3190,3191",
"city3148":"太原市,大同市,陽(yáng)泉市,長(zhǎng)治市,晉城市,朔州市,晉中市,運(yùn)城市,忻州市,臨汾市,呂梁市",
"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":"沈陽(yáng)市,大連市,鞍山市,撫順市,本溪市,丹東市,錦州市,營(yíng)口市,阜新市,遼陽(yáng)市,盤(pán)錦市,鐵嶺市,朝陽(yáng)市,葫蘆島市",
"code3150":"3215,3216,3217,3218,3219,3220,3221,3222,3223,3224,3225,3226,3227,3228",
"city3151":"長(zhǎng)春市,吉林市,四平市,遼源市,通化市,白山市,松原市,白城市,延邊朝鮮族自治州",
"code3151":"3229,3230,3231,3232,3233,3234,3235,3236,3237",
"city3152":"哈爾濱市,齊齊哈爾市,雞西市,鶴崗市,雙鴨山市,大慶市,伊春市,佳木斯市,七臺(tái)河市,牡丹江市,黑河市,綏化市,大興安嶺地區(qū)",
"code3152":"3238,3239,3240,3241,3242,3243,3244,3245,3246,3247,3248,3249,3250",
"city3153":"市轄區(qū)", "code3153":"3251",
"city3154":"南京市,無(wú)錫市,徐州市,常州市,蘇州市,南通市,連云港市,淮安市,鹽城市,揚(yáng)州市,鎮(zhèn)江市,泰州市,宿遷市",
"code3154":"3252,3253,3254,3255,3256,3257,3258,3259,3260,3261,3262,3263,3264",
"city3155":"杭州市,寧波市,溫州市,嘉興市,湖州市,紹興市,金華市,衢州市,舟山市,臺(tái)州市,麗水市",
"code3155":"3265,3266,3267,3268,3269,3270,3271,3272,3273,3274,3275",
"city3156":"合肥市,蕪湖市,蚌埠市,淮南市,馬鞍山市,淮北市,銅陵市,安慶市,黃山市,滁州市,阜陽(yáng)市,宿州市,巢湖市,六安市,亳州市,池州市,宣城市",
"code3156":"3276,3277,3278,3279,3280,3281,3282,3283,3284,3285,3286,3287,3288,3289,3290,3291,3292",
"city3157":"福州市,廈門(mén)市,莆田市,三明市,泉州市,漳州市,南平市,龍巖市,寧德市",
"code3157":"3293,3294,3295,3296,3297,3298,3299,3300,3301",
"city3158":"南昌市,景德鎮(zhèn)市,萍鄉(xiāng)市,九江市,新余市,鷹潭市,贛州市,吉安市,宜春市,撫州市,上饒市",
"code3158":"3302,3303,3304,3305,3306,3307,3308,3309,3310,3311,3312",
"city3159":"濟(jì)南市,青島市,淄博市,棗莊市,東營(yíng)市,煙臺(tái)市,濰坊市,濟(jì)寧市,泰安市,威海市,日照市,萊蕪市,臨沂市,德州市,聊城市,濱州市,荷澤市",
"code3159":"3313,3314,3315,3316,3317,3318,3319,3320,3321,3322,3323,3324,3325,3326,3327,3328,3329",
"city3160":"鄭州市,開(kāi)封市,洛陽(yáng)市,平頂山市,安陽(yáng)市,鶴壁市,新鄉(xiāng)市,焦作市,濮陽(yáng)市,許昌市,漯河市,三門(mén)峽市,南陽(yáng)市,商丘市,信陽(yáng)市,周口市,駐馬店市",
"code3160":"3330,3331,3332,3333,3334,3335,3336,3337,3338,3339,3340,3341,3342,3343,3344,3345,3346",
"city3161":"武漢市,黃石市,十堰市,宜昌市,襄樊市,鄂州市,荊門(mén)市,孝感市,荊州市,黃岡市,咸寧市,隨州市,恩施土家族苗族自治州,省直轄行政單位",
"code3161":"3347,3348,3349,3350,3351,3352,3353,3354,3355,3356,3357,3358,3359,3360",
"city3162":"長(zhǎng)沙市,株洲市,湘潭市,衡陽(yáng)市,邵陽(yáng)市,岳陽(yáng)市,常德市,張家界市,益陽(yáng)市,郴州市,永州市,懷化市,婁底市,湘西土家族苗族自治州",
"code3162":"3361,3362,3363,3364,3365,3366,3367,3368,3369,3370,3371,3372,3373,3374",
"city3163":"廣州市,韶關(guān)市,深圳市,珠海市,汕頭市,佛山市,江門(mén)市,湛江市,茂名市,肇慶市,惠州市,梅州市,汕尾市,河源市,陽(yáng)江市,清遠(yuǎn)市,東莞市,中山市,潮州市,揭陽(yáng)市,云浮市",
"code3163":"3375,3376,3377,3378,3379,3380,3381,3382,3383,3384,3385,3386,3387,3388,3389,3390,3391,3392,3393,3394,3395",
"city3164":"南寧市,柳州市,桂林市,梧州市,北海市,防城港市,欽州市,貴港市,玉林市,百色市,賀州市,河池市,來(lái)賓市,崇左市",
"code3164":"3396,3397,3398,3399,3400,3401,3402,3403,3404,3405,3406,3407,3408,3409",
"city3165":"?？谑?三亞市,省直轄縣級(jí)行政單位",
"code3165":"3410,3411,3412",
"city3166":"市轄區(qū)",
"code3166":"3413",
"city3167":"成都市,自貢市,攀枝花市,瀘州市,德陽(yáng)市,綿陽(yáng)市,廣元市,遂寧市,內(nèi)江市,樂(lè)山市,南充市,眉山市,宜賓市,廣安市,達(dá)州市,雅安市,巴中市,資陽(yáng)市,阿壩藏族羌族自治州,甘孜藏族自治州,涼山彝族自治州",
"code3167":"3415,3416,3417,3418,3419,3420,3421,3422,3423,3424,3425,3426,3427,3428,3429,3430,3431,3432,3433,3434,3435",
"city3168":"貴陽(yáng)市,六盤(pán)水市,遵義市,安順市,銅仁地區(qū),黔西南布依族苗族自治州,畢節(jié)地區(qū),黔東南苗族侗族自治州,黔南布依族苗族自治州",
"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":"拉薩市,昌都地區(qū),山南地區(qū),日喀則地區(qū),那曲地區(qū),阿里地區(qū),林芝地區(qū)",
"code3170":"3461,3462,3463,3464,3465,3466,3467",
"city3171":"西安市,銅川市,寶雞市,咸陽(yáng)市,渭南市,延安市,漢中市,榆林市,安康市,商洛市",
"code3171":"3468,3469,3470,3471,3472,3473,3474,3475,3476,3477",
"city3172":"蘭州市,嘉峪關(guān)市,金昌市,白銀市,天水市,武威市,張掖市,平?jīng)鍪?酒泉市,慶陽(yáng)市,定西市,隴南市,臨夏回族自治州,甘南藏族自治州",
"code3172":"3478,3479,3480,3481,3482,3483,3484,3485,3486,3487,3488,3489,3490,3491",
"city3173":"西寧市,海東地區(qū),海北藏族自治州,黃南藏族自治州,海南藏族自治州,果洛藏族自治州,玉樹(shù)藏族自治州,海西蒙古族藏族自治州",
"code3173":"3492,3493,3494,3495,3496,3497,3498,3499",
"city3174":"銀川市,石嘴山市,吳忠市,固原市,中衛(wèi)市",
"code3174":"3500,3501,3502,3503,3504",
"city3175":"烏魯木齊市,克拉瑪依市,吐魯番地區(qū),哈密地區(qū),昌吉回族自治州,博爾塔拉蒙古自治州,巴音郭楞蒙古自治州,阿克蘇地區(qū),克孜勒蘇柯?tīng)柨俗巫灾沃?喀什地區(qū),和田地區(qū),伊犁哈薩克自治州,塔城地區(qū),阿勒泰地區(qū),省直轄行政單位",
"code3175":"3505,3506,3507,3508,3509,3510,3511,3512,3513,3514,3515,3516,3517,3518,3519",
"city3176":"",
"code3176":"",
"city3177":"",
"code3177":"",
"city3178":"",
"code3178":"",
provinces:"北京市,天津市,河北省,山西省,內(nèi)蒙古自治區(qū),遼寧省,吉林省,黑龍江省,上海市,江蘇省,浙江省,安徽省,福建省,江西省,山東省,河南省,湖北省,湖南省,廣東省,廣西壯族自治區(qū),海南省,重慶市,四川省,貴州省,云南省,西藏自治區(qū),陜西省,甘肅省,青海省,寧夏回族自治區(qū),新疆維吾爾自治區(qū),臺(tái)灣省,香港特別行政區(qū),澳門(mén)特別行政區(qū)",
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代碼，關(guān)鍵代碼
$(function(){
//取得json對(duì)象
var jsonobj = eval('('+ area +')');
//省編號(hào)
var provcodes = jsonobj.provcodes;
//省編號(hào)數(shù)組
var provcodesArray = provcodes.split(',');
//省編號(hào)個(gè)數(shù)
var provcodesLength = provcodesArray.length;
//省名稱
var provinces = jsonobj.provinces;
var provincesArray = provinces.split(',');
var provhtml = '<option value="">請(qǐng)選擇</option>';
//綁定省份
for(var i=0;i<provcodesLength;i++){
provhtml += '<option value="'+provcodesArray[i]+'">'+provincesArray[i]+'</option>';
}
$("#province").append(provhtml);
//選擇省級(jí)市加載下級(jí)
$("#province").change(function(){
var cityhtml = '<option value="">請(qǐng)選擇</option>';
var provcode = $(this).val(); //省級(jí)的編號(hào)
//如果選擇的是空則退出
if(provcode==""){
$("#city").empty().append(cityhtml);
return ;
}
var prov = "city"+provcode; //市級(jí)名稱
var code = "code"+provcode; //市級(jí)編號(hào)
var provArray = jsonobj[code].split(','); //市級(jí)名稱數(shù)組
var prolength = provArray.length;
var cityArray = jsonobj[prov].split(','); //市級(jí)編號(hào)數(shù)組
//綁定市級(jí)
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>
//上面的代碼貼過(guò)來(lái)即可
</script>
</HEAD>
<BODY>
地區(qū):
<select name="province" id="province"></select>
<select name="city" id="city">
<option value="">請(qǐng)選擇</option>
</select>
</BODY>
</HTML>
接下來(lái)就是.NET代碼數(shù)據(jù)json啦，
/// <summary>
/// 輸出json數(shù)據(jù)
/// </summary>
/// <remarks>
/// <para>Date:2011-07-01</para>
/// <para>Author:太平盛世</para>
/// </remarks>
/// <returns></returns>
public string WriteJson()
{
//取數(shù)據(jù)庫(kù)里面的所有的數(shù)據(jù)
Ilist<AreaTye> areaList = GetAreaTypeListAll();
//取省級(jí)集合，AT_ParentId=1的
//var provNameParentId = from area in areaList where area.AT_ParentId == 1 select area;
//所有的數(shù)據(jù)
var areaLinq = from area in areaList select area;
//篩選，篩選出省級(jí)集合，篩選調(diào)整 AT_ParentId == 0
var areaWhereParentId = areaLinq.Where(m => m.AT_ParentId == 0).ToList();
//省級(jí)名稱 格式:"湖南省,浙江省,北京市,..."
string provName = string.Join(",", areaWhereParentId.Select(m => m.AT_Name).ToArray());
//省級(jí)編號(hào) 格式:"1,2,3,..."
string provCode = string.Join(",", areaWhereParentId.Select(m => m.AT_Id).ToArray());
//省級(jí)數(shù)量
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();
}
地區(qū)表大致設(shè)計(jì)為
AT_Id :唯一標(biāo)識(shí),json里面對(duì)應(yīng)的code
AT_Name : 地區(qū)中文名
AT_ParentId :父級(jí)id
AT_Level:級(jí)別,1為省級(jí)，2為市級(jí)
以上代碼僅供參考，代碼質(zhì)量和效率無(wú)法得到保證，使用出現(xiàn)的后果自負(fù)..
希望能得到大家的寶貴意見(jiàn)和更好的解決方案級(jí)方法
[{"Code":3231,"Name":"長(zhǎng)春市"},
{"Code":3232,"Name":"吉林市}]
如果有一萬(wàn)個(gè)地區(qū)，會(huì)多出幾萬(wàn)個(gè)字符，這么奢侈的做法我想我還是放棄了吧，
也是出于這種想法，就寫(xiě)了使用.NET輸出此種格式的json，以及寫(xiě)了基于jquery聯(lián)動(dòng)的下拉。
主要代碼如下：
json代碼:
復(fù)制代碼 代碼如下:
var area = '{"city3145":"市轄區(qū)",
"code3145":"3179",
"city3146":"市轄區(qū)",
"code3146":"3180",
"city3147":"石家莊市,唐山市,秦皇島市,邯鄲市,邢臺(tái)市,保定市,張家口市,承德市,滄州市,廊坊市,衡水市",
"code3147":"3181,3182,3183,3184,3185,3186,3187,3188,3189,3190,3191",
"city3148":"太原市,大同市,陽(yáng)泉市,長(zhǎng)治市,晉城市,朔州市,晉中市,運(yùn)城市,忻州市,臨汾市,呂梁市",
"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":"沈陽(yáng)市,大連市,鞍山市,撫順市,本溪市,丹東市,錦州市,營(yíng)口市,阜新市,遼陽(yáng)市,盤(pán)錦市,鐵嶺市,朝陽(yáng)市,葫蘆島市",
"code3150":"3215,3216,3217,3218,3219,3220,3221,3222,3223,3224,3225,3226,3227,3228",
"city3151":"長(zhǎng)春市,吉林市,四平市,遼源市,通化市,白山市,松原市,白城市,延邊朝鮮族自治州",
"code3151":"3229,3230,3231,3232,3233,3234,3235,3236,3237",
"city3152":"哈爾濱市,齊齊哈爾市,雞西市,鶴崗市,雙鴨山市,大慶市,伊春市,佳木斯市,七臺(tái)河市,牡丹江市,黑河市,綏化市,大興安嶺地區(qū)",
"code3152":"3238,3239,3240,3241,3242,3243,3244,3245,3246,3247,3248,3249,3250",
"city3153":"市轄區(qū)", "code3153":"3251",
"city3154":"南京市,無(wú)錫市,徐州市,常州市,蘇州市,南通市,連云港市,淮安市,鹽城市,揚(yáng)州市,鎮(zhèn)江市,泰州市,宿遷市",
"code3154":"3252,3253,3254,3255,3256,3257,3258,3259,3260,3261,3262,3263,3264",
"city3155":"杭州市,寧波市,溫州市,嘉興市,湖州市,紹興市,金華市,衢州市,舟山市,臺(tái)州市,麗水市",
"code3155":"3265,3266,3267,3268,3269,3270,3271,3272,3273,3274,3275",
"city3156":"合肥市,蕪湖市,蚌埠市,淮南市,馬鞍山市,淮北市,銅陵市,安慶市,黃山市,滁州市,阜陽(yáng)市,宿州市,巢湖市,六安市,亳州市,池州市,宣城市",
"code3156":"3276,3277,3278,3279,3280,3281,3282,3283,3284,3285,3286,3287,3288,3289,3290,3291,3292",
"city3157":"福州市,廈門(mén)市,莆田市,三明市,泉州市,漳州市,南平市,龍巖市,寧德市",
"code3157":"3293,3294,3295,3296,3297,3298,3299,3300,3301",
"city3158":"南昌市,景德鎮(zhèn)市,萍鄉(xiāng)市,九江市,新余市,鷹潭市,贛州市,吉安市,宜春市,撫州市,上饒市",
"code3158":"3302,3303,3304,3305,3306,3307,3308,3309,3310,3311,3312",
"city3159":"濟(jì)南市,青島市,淄博市,棗莊市,東營(yíng)市,煙臺(tái)市,濰坊市,濟(jì)寧市,泰安市,威海市,日照市,萊蕪市,臨沂市,德州市,聊城市,濱州市,荷澤市",
"code3159":"3313,3314,3315,3316,3317,3318,3319,3320,3321,3322,3323,3324,3325,3326,3327,3328,3329",
"city3160":"鄭州市,開(kāi)封市,洛陽(yáng)市,平頂山市,安陽(yáng)市,鶴壁市,新鄉(xiāng)市,焦作市,濮陽(yáng)市,許昌市,漯河市,三門(mén)峽市,南陽(yáng)市,商丘市,信陽(yáng)市,周口市,駐馬店市",
"code3160":"3330,3331,3332,3333,3334,3335,3336,3337,3338,3339,3340,3341,3342,3343,3344,3345,3346",
"city3161":"武漢市,黃石市,十堰市,宜昌市,襄樊市,鄂州市,荊門(mén)市,孝感市,荊州市,黃岡市,咸寧市,隨州市,恩施土家族苗族自治州,省直轄行政單位",
"code3161":"3347,3348,3349,3350,3351,3352,3353,3354,3355,3356,3357,3358,3359,3360",
"city3162":"長(zhǎng)沙市,株洲市,湘潭市,衡陽(yáng)市,邵陽(yáng)市,岳陽(yáng)市,常德市,張家界市,益陽(yáng)市,郴州市,永州市,懷化市,婁底市,湘西土家族苗族自治州",
"code3162":"3361,3362,3363,3364,3365,3366,3367,3368,3369,3370,3371,3372,3373,3374",
"city3163":"廣州市,韶關(guān)市,深圳市,珠海市,汕頭市,佛山市,江門(mén)市,湛江市,茂名市,肇慶市,惠州市,梅州市,汕尾市,河源市,陽(yáng)江市,清遠(yuǎn)市,東莞市,中山市,潮州市,揭陽(yáng)市,云浮市",
"code3163":"3375,3376,3377,3378,3379,3380,3381,3382,3383,3384,3385,3386,3387,3388,3389,3390,3391,3392,3393,3394,3395",
"city3164":"南寧市,柳州市,桂林市,梧州市,北海市,防城港市,欽州市,貴港市,玉林市,百色市,賀州市,河池市,來(lái)賓市,崇左市",
"code3164":"3396,3397,3398,3399,3400,3401,3402,3403,3404,3405,3406,3407,3408,3409",
"city3165":"?？谑?三亞市,省直轄縣級(jí)行政單位",
"code3165":"3410,3411,3412",
"city3166":"市轄區(qū)",
"code3166":"3413",
"city3167":"成都市,自貢市,攀枝花市,瀘州市,德陽(yáng)市,綿陽(yáng)市,廣元市,遂寧市,內(nèi)江市,樂(lè)山市,南充市,眉山市,宜賓市,廣安市,達(dá)州市,雅安市,巴中市,資陽(yáng)市,阿壩藏族羌族自治州,甘孜藏族自治州,涼山彝族自治州",
"code3167":"3415,3416,3417,3418,3419,3420,3421,3422,3423,3424,3425,3426,3427,3428,3429,3430,3431,3432,3433,3434,3435",
"city3168":"貴陽(yáng)市,六盤(pán)水市,遵義市,安順市,銅仁地區(qū),黔西南布依族苗族自治州,畢節(jié)地區(qū),黔東南苗族侗族自治州,黔南布依族苗族自治州",
"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":"拉薩市,昌都地區(qū),山南地區(qū),日喀則地區(qū),那曲地區(qū),阿里地區(qū),林芝地區(qū)",
"code3170":"3461,3462,3463,3464,3465,3466,3467",
"city3171":"西安市,銅川市,寶雞市,咸陽(yáng)市,渭南市,延安市,漢中市,榆林市,安康市,商洛市",
"code3171":"3468,3469,3470,3471,3472,3473,3474,3475,3476,3477",
"city3172":"蘭州市,嘉峪關(guān)市,金昌市,白銀市,天水市,武威市,張掖市,平?jīng)鍪?酒泉市,慶陽(yáng)市,定西市,隴南市,臨夏回族自治州,甘南藏族自治州",
"code3172":"3478,3479,3480,3481,3482,3483,3484,3485,3486,3487,3488,3489,3490,3491",
"city3173":"西寧市,海東地區(qū),海北藏族自治州,黃南藏族自治州,海南藏族自治州,果洛藏族自治州,玉樹(shù)藏族自治州,海西蒙古族藏族自治州",
"code3173":"3492,3493,3494,3495,3496,3497,3498,3499",
"city3174":"銀川市,石嘴山市,吳忠市,固原市,中衛(wèi)市",
"code3174":"3500,3501,3502,3503,3504",
"city3175":"烏魯木齊市,克拉瑪依市,吐魯番地區(qū),哈密地區(qū),昌吉回族自治州,博爾塔拉蒙古自治州,巴音郭楞蒙古自治州,阿克蘇地區(qū),克孜勒蘇柯?tīng)柨俗巫灾沃?喀什地區(qū),和田地區(qū),伊犁哈薩克自治州,塔城地區(qū),阿勒泰地區(qū),省直轄行政單位",
"code3175":"3505,3506,3507,3508,3509,3510,3511,3512,3513,3514,3515,3516,3517,3518,3519",
"city3176":"",
"code3176":"",
"city3177":"",
"code3177":"",
"city3178":"",
"code3178":"",
provinces:"北京市,天津市,河北省,山西省,內(nèi)蒙古自治區(qū),遼寧省,吉林省,黑龍江省,上海市,江蘇省,浙江省,安徽省,福建省,江西省,山東省,河南省,湖北省,湖南省,廣東省,廣西壯族自治區(qū),海南省,重慶市,四川省,貴州省,云南省,西藏自治區(qū),陜西省,甘肅省,青海省,寧夏回族自治區(qū),新疆維吾爾自治區(qū),臺(tái)灣省,香港特別行政區(qū),澳門(mén)特別行政區(qū)",
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代碼，關(guān)鍵代碼
復(fù)制代碼 代碼如下:
$(function(){
//取得json對(duì)象
var jsonobj = eval('('+ area +')');
//省編號(hào)
var provcodes = jsonobj.provcodes;
//省編號(hào)數(shù)組
var provcodesArray = provcodes.split(',');
//省編號(hào)個(gè)數(shù)
var provcodesLength = provcodesArray.length;
//省名稱
var provinces = jsonobj.provinces;
var provincesArray = provinces.split(',');
var provhtml = '<option value="">請(qǐng)選擇</option>';
//綁定省份
for(var i=0;i<provcodesLength;i++){
provhtml += '<option value="'+provcodesArray[i]+'">'+provincesArray[i]+'</option>';
}
$("#province").append(provhtml);
//選擇省級(jí)市加載下級(jí)
$("#province").change(function(){
var cityhtml = '<option value="">請(qǐng)選擇</option>';
var provcode = $(this).val(); //省級(jí)的編號(hào)
//如果選擇的是空則退出
if(provcode==""){
$("#city").empty().append(cityhtml);
return ;
}
var prov = "city"+provcode; //市級(jí)名稱
var code = "code"+provcode; //市級(jí)編號(hào)
var provArray = jsonobj[code].split(','); //市級(jí)名稱數(shù)組
var prolength = provArray.length;
var cityArray = jsonobj[prov].split(','); //市級(jí)編號(hào)數(shù)組
//綁定市級(jí)
for(var i=0;i<prolength;i++){
cityhtml += '<option value="'+provArray[i]+'">'+cityArray[i]+'</option>';
}
$("#city").empty().append(cityhtml);
});
});
完整代碼：
復(fù)制代碼 代碼如下:
<!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>
//上面的代碼貼過(guò)來(lái)即可
</script>
</HEAD>
<BODY>
地區(qū):
<select name="province" id="province"></select>
<select name="city" id="city">
<option value="">請(qǐng)選擇</option>
</select>
</BODY>
</HTML>
接下來(lái)就是.NET代碼數(shù)據(jù)json啦，
復(fù)制代碼 代碼如下:
/// <summary>
/// 輸出json數(shù)據(jù)
/// </summary>
/// <remarks>
/// <para>Date:2011-07-01</para>
/// <para>Author:太平盛世</para>
/// </remarks>
/// <returns></returns>
public string WriteJson()
{
//取數(shù)據(jù)庫(kù)里面的所有的數(shù)據(jù)
Ilist<AreaTye> areaList = GetAreaTypeListAll();
//取省級(jí)集合，AT_ParentId=1的
//var provNameParentId = from area in areaList where area.AT_ParentId == 1 select area;
//所有的數(shù)據(jù)
var areaLinq = from area in areaList select area;
//篩選，篩選出省級(jí)集合，篩選調(diào)整 AT_ParentId == 0
var areaWhereParentId = areaLinq.Where(m => m.AT_ParentId == 0).ToList();
//省級(jí)名稱 格式:"湖南省,浙江省,北京市,..."
string provName = string.Join(",", areaWhereParentId.Select(m => m.AT_Name).ToArray());
//省級(jí)編號(hào) 格式:"1,2,3,..."
string provCode = string.Join(",", areaWhereParentId.Select(m => m.AT_Id).ToArray());
//省級(jí)數(shù)量
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();
}
地區(qū)表大致設(shè)計(jì)為
AT_Id :唯一標(biāo)識(shí),json里面對(duì)應(yīng)的code
AT_Name : 地區(qū)中文名
AT_ParentId :父級(jí)id
AT_Level:級(jí)別,1為省級(jí)，2為市級(jí)
以上代碼僅供參考，代碼質(zhì)量和效率無(wú)法得到保證，使用出現(xiàn)的后果自負(fù)..
希望能得到大家的寶貴意見(jiàn)和更好的解決方案級(jí)方法
您可能感興趣的文章:
- JavaScript正則表達(dá)式驗(yàn)證身份證號(hào)碼是否合法(兩種方法)
- JS支持帶x身份證號(hào)碼驗(yàn)證函數(shù)
- js實(shí)現(xiàn)二代身份證號(hào)碼驗(yàn)證詳解
- javascript驗(yàn)證身份證號(hào)
- js驗(yàn)證真實(shí)姓名與身份證號(hào)是否匹配
- javascript或asp實(shí)現(xiàn)的判斷身份證號(hào)碼是否正確兩種驗(yàn)證方法
- javascript 身份證號(hào)碼驗(yàn)證函數(shù)(可辨真?zhèn)?，支?5或18位身份證號(hào))測(cè)試誤差為0
- javascript身份證驗(yàn)證代碼
- js 驗(yàn)證身份證信息有效性
- js 第二代身份證號(hào)碼的驗(yàn)證機(jī)制代碼
- 根據(jù)IP的地址，區(qū)分不同的地區(qū)，查看不同的網(wǎng)站頁(yè)面的js代碼
- JS實(shí)現(xiàn)的驗(yàn)證身份證及獲取地區(qū)功能示例
相關(guān)文章
jquery插件開(kāi)發(fā)之實(shí)現(xiàn)md5插件
這篇文章主要介紹了jquery開(kāi)發(fā)實(shí)現(xiàn)的md5插件，最后返回的是一串十進(jìn)制數(shù)，在jquery1.9.2下測(cè)試通過(guò),需要的朋友可以參考下2014-03-03
Struts2+jquery.form.js實(shí)現(xiàn)圖片與文件上傳的方法
這篇文章主要介紹了Struts2+jquery.form.js實(shí)現(xiàn)圖片與文件上傳的方法,結(jié)合實(shí)例形式詳細(xì)分析了jquery.form.js插件實(shí)現(xiàn)前臺(tái)圖片上傳提交及Struts2進(jìn)行后臺(tái)處理的相關(guān)步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-05-05
一步一步制作jquery插件Tabs實(shí)現(xiàn)過(guò)程
自制一個(gè)簡(jiǎn)潔的tabs插件還是有必要的在設(shè)計(jì)之前，先整理好思路，實(shí)現(xiàn)tabs，自動(dòng)輪換，ajax等主要功能，然后是dom的排列形式，這里采用傳統(tǒng)的2010-07-07
本文給大家介紹jquery側(cè)邊欄實(shí)現(xiàn)代碼，這些側(cè)邊欄菜單可以用在不同風(fēng)格的網(wǎng)頁(yè)上,如果你覺(jué)得不錯(cuò),可以參考下本文實(shí)現(xiàn)代碼2016-05-05
ASP.NET jQuery 實(shí)例8 (動(dòng)態(tài)添加內(nèi)容到DropDownList)
在web應(yīng)用里，我們經(jīng)常需要通過(guò)其他控件的事件觸發(fā)動(dòng)態(tài)構(gòu)造DropDownList數(shù)據(jù)內(nèi)容。在這節(jié)中，我們將會(huì)看到如何實(shí)現(xiàn)通過(guò)選擇第一個(gè)下來(lái)框的內(nèi)容來(lái)動(dòng)態(tài)構(gòu)造第二個(gè)下拉框的內(nèi)容2012-02-02
這篇文章主要介紹了jQuery如何獲取動(dòng)態(tài)添加的元素的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例
這篇文章主要為大家詳細(xì)介紹了Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
本篇文章主要介紹了jQuery返回定位插件的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05
本篇文章分享了基于jQuery實(shí)現(xiàn)的幻燈圖片切換效果的部分代碼。感興趣的朋友可以下載實(shí)例運(yùn)行，下面就跟小編一起來(lái)看看吧2016-12-12
這篇文章主要介紹了jQuery的context屬性用法,實(shí)例分析了context屬性返回節(jié)點(diǎn)內(nèi)容的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12