直接上代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> new document </title>
<script>
var areas = [{
"id" : 1,
"n" : "北京市",
"citys" : [{
"id" : 1,
"n" : "北京市"
}
]
}, {
"id" : 2,
"n" : "天津市",
"citys" : [{
"id" : 2,
"n" : "天津市"
}
]
}, {
"id" : 3,
"n" : "河北省",
"citys" : [{
"id" : 3,
"n" : "石家莊市",
"countys" : [{"id":1,"n":"石家莊的第一個縣"},{"id":2,"n":"石家莊的第二個縣"}]
}, {
"id" : 4,
"n" : "唐山市"
}, {
"id" : 5,
"n" : "秦皇島市"
}, {
"id" : 6,
"n" : "邯鄲市"
}, {
"id" : 7,
"n" : "邢臺市"
}, {
"id" : 8,
"n" : "保定市"
}, {
"id" : 9,
"n" : "張家口市"
}, {
"id" : 10,
"n" : "承德市"
}, {
"id" : 11,
"n" : "滄州市"
}, {
"id" : 12,
"n" : "廊坊市"
}, {
"id" : 13,
"n" : "衡水市"
}
]
}, {
"id" : 4,
"n" : "山西省",
"citys" : [{
"id" : 14,
"n" : "太原市"
}, {
"id" : 15,
"n" : "大同市"
}, {
"id" : 16,
"n" : "陽泉市"
}, {
"id" : 17,
"n" : "長治市"
}, {
"id" : 18,
"n" : "晉城市"
}, {
"id" : 19,
"n" : "朔州市"
}, {
"id" : 20,
"n" : "晉中市"
}, {
"id" : 21,
"n" : "運城市"
}, {
"id" : 22,
"n" : "忻州市"
}, {
"id" : 23,
"n" : "臨汾市"
}, {
"id" : 24,
"n" : "呂梁市"
}
]
}, {
"id" : 5,
"n" : "內蒙古自治區",
"citys" : [{
"id" : 25,
"n" : "呼和浩特市"
}, {
"id" : 26,
"n" : "包頭市"
}, {
"id" : 27,
"n" : "烏海市"
}, {
"id" : 28,
"n" : "赤峯市"
}, {
"id" : 29,
"n" : "通遼市"
}, {
"id" : 30,
"n" : "鄂爾多斯市"
}, {
"id" : 31,
"n" : "呼倫貝爾市"
}, {
"id" : 32,
"n" : "巴彥淖爾市"
}, {
"id" : 33,
"n" : "烏蘭察布市"
}, {
"id" : 34,
"n" : "興安盟"
}, {
"id" : 35,
"n" : "錫林郭勒盟"
}, {
"id" : 36,
"n" : "阿拉善盟"
}
]
}, {
"id" : 6,
"n" : "遼寧省",
"citys" : [{
"id" : 37,
"n" : "瀋陽市"
}, {
"id" : 38,
"n" : "大連市"
}, {
"id" : 39,
"n" : "鞍山市"
}, {
"id" : 40,
"n" : "撫順市"
}, {
"id" : 41,
"n" : "本溪市"
}, {
"id" : 42,
"n" : "丹東市"
}, {
"id" : 43,
"n" : "錦州市"
}, {
"id" : 44,
"n" : "營口市"
}, {
"id" : 45,
"n" : "阜新市"
}, {
"id" : 46,
"n" : "遼陽市"
}, {
"id" : 47,
"n" : "盤錦市"
}, {
"id" : 48,
"n" : "鐵嶺市"
}, {
"id" : 49,
"n" : "朝陽市"
}, {
"id" : 50,
"n" : "葫蘆島市"
}
]
}, {
"id" : 7,
"n" : "吉林省",
"citys" : [{
"id" : 51,
"n" : "長春市"
}, {
"id" : 52,
"n" : "吉林市"
}, {
"id" : 53,
"n" : "四平市"
}, {
"id" : 54,
"n" : "遼源市"
}, {
"id" : 55,
"n" : "通化市"
}, {
"id" : 56,
"n" : "白山市"
}, {
"id" : 57,
"n" : "松原市"
}, {
"id" : 58,
"n" : "白城市"
}, {
"id" : 59,
"n" : "延邊朝鮮族自治州"
}
]
}, {
"id" : 8,
"n" : "黑龍江省",
"citys" : [{
"id" : 60,
"n" : "哈爾濱市"
}, {
"id" : 61,
"n" : "齊齊哈爾市"
}, {
"id" : 62,
"n" : "雞西市"
}, {
"id" : 63,
"n" : "鶴崗市"
}, {
"id" : 64,
"n" : "雙鴨山市"
}, {
"id" : 65,
"n" : "大慶市"
}, {
"id" : 66,
"n" : "伊春市"
}, {
"id" : 67,
"n" : "佳木斯市"
}, {
"id" : 68,
"n" : "七臺河市"
}, {
"id" : 69,
"n" : "牡丹江市"
}, {
"id" : 70,
"n" : "黑河市"
}, {
"id" : 71,
"n" : "綏化市"
}, {
"id" : 72,
"n" : "大興安嶺地區"
}
]
}, {
"id" : 9,
"n" : "上海市",
"citys" : [{
"id" : 73,
"n" : "上海市"
}
]
}, {
"id" : 10,
"n" : "江蘇省",
"citys" : [{
"id" : 74,
"n" : "南京市"
}, {
"id" : 75,
"n" : "無錫市"
}, {
"id" : 76,
"n" : "徐州市"
}, {
"id" : 77,
"n" : "常州市"
}, {
"id" : 78,
"n" : "蘇州市"
}, {
"id" : 79,
"n" : "南通市"
}, {
"id" : 80,
"n" : "連雲港市"
}, {
"id" : 81,
"n" : "淮安市"
}, {
"id" : 82,
"n" : "鹽城市"
}, {
"id" : 83,
"n" : "揚州市"
}, {
"id" : 84,
"n" : "鎮江市"
}, {
"id" : 85,
"n" : "泰州市"
}, {
"id" : 86,
"n" : "宿遷市"
}
]
}, {
"id" : 11,
"n" : "浙江省",
"citys" : [{
"id" : 87,
"n" : "杭州市"
}, {
"id" : 88,
"n" : "寧波市"
}, {
"id" : 89,
"n" : "溫州市"
}, {
"id" : 90,
"n" : "嘉興市"
}, {
"id" : 91,
"n" : "湖州市"
}, {
"id" : 92,
"n" : "紹興市"
}, {
"id" : 93,
"n" : "金華市"
}, {
"id" : 94,
"n" : "衢州市"
}, {
"id" : 95,
"n" : "舟山市"
}, {
"id" : 96,
"n" : "台州市"
}, {
"id" : 97,
"n" : "麗水市"
}
]
}, {
"id" : 12,
"n" : "安徽省",
"citys" : [{
"id" : 98,
"n" : "合肥市"
}, {
"id" : 99,
"n" : "蕪湖市"
}, {
"id" : 100,
"n" : "蚌埠市"
}, {
"id" : 101,
"n" : "淮南市"
}, {
"id" : 102,
"n" : "馬鞍山市"
}, {
"id" : 103,
"n" : "淮北市"
}, {
"id" : 104,
"n" : "銅陵市"
}, {
"id" : 105,
"n" : "安慶市"
}, {
"id" : 106,
"n" : "黃山市"
}, {
"id" : 107,
"n" : "滁州市"
}, {
"id" : 108,
"n" : "阜陽市"
}, {
"id" : 109,
"n" : "宿州市"
}, {
"id" : 110,
"n" : "巢湖市"
}, {
"id" : 111,
"n" : "六安市"
}, {
"id" : 112,
"n" : "亳州市"
}, {
"id" : 113,
"n" : "池州市"
}, {
"id" : 114,
"n" : "宣城市"
}
]
}, {
"id" : 13,
"n" : "福建省",
"citys" : [{
"id" : 115,
"n" : "福州市"
}, {
"id" : 116,
"n" : "廈門市"
}, {
"id" : 117,
"n" : "莆田市"
}, {
"id" : 118,
"n" : "三明市"
}, {
"id" : 119,
"n" : "泉州市"
}, {
"id" : 120,
"n" : "漳州市"
}, {
"id" : 121,
"n" : "南平市"
}, {
"id" : 122,
"n" : "龍巖市"
}, {
"id" : 123,
"n" : "寧德市"
}
]
}, {
"id" : 14,
"n" : "江西省",
"citys" : [{
"id" : 124,
"n" : "南昌市"
}, {
"id" : 125,
"n" : "景德鎮市"
}, {
"id" : 126,
"n" : "萍鄉市"
}, {
"id" : 127,
"n" : "九江市"
}, {
"id" : 128,
"n" : "新餘市"
}, {
"id" : 129,
"n" : "鷹潭市"
}, {
"id" : 130,
"n" : "贛州市"
}, {
"id" : 131,
"n" : "吉安市"
}, {
"id" : 132,
"n" : "宜春市"
}, {
"id" : 133,
"n" : "撫州市"
}, {
"id" : 134,
"n" : "上饒市"
}
]
}, {
"id" : 15,
"n" : "山東省",
"citys" : [{
"id" : 135,
"n" : "濟南市"
}, {
"id" : 136,
"n" : "青島市"
}, {
"id" : 137,
"n" : "淄博市"
}, {
"id" : 138,
"n" : "棗莊市"
}, {
"id" : 139,
"n" : "東營市"
}, {
"id" : 140,
"n" : "煙臺市"
}, {
"id" : 141,
"n" : "濰坊市"
}, {
"id" : 142,
"n" : "濟寧市"
}, {
"id" : 143,
"n" : "泰安市"
}, {
"id" : 144,
"n" : "威海市"
}, {
"id" : 145,
"n" : "日照市"
}, {
"id" : 146,
"n" : "萊蕪市"
}, {
"id" : 147,
"n" : "臨沂市"
}, {
"id" : 148,
"n" : "德州市"
}, {
"id" : 149,
"n" : "聊城市"
}, {
"id" : 150,
"n" : "濱州市"
}, {
"id" : 151,
"n" : "荷澤市"
}
]
}, {
"id" : 16,
"n" : "河南省",
"citys" : [{
"id" : 152,
"n" : "鄭州市"
}, {
"id" : 153,
"n" : "開封市"
}, {
"id" : 154,
"n" : "洛陽市"
}, {
"id" : 155,
"n" : "平頂山市"
}, {
"id" : 156,
"n" : "安陽市"
}, {
"id" : 157,
"n" : "鶴壁市"
}, {
"id" : 158,
"n" : "新鄉市"
}, {
"id" : 159,
"n" : "焦作市"
}, {
"id" : 160,
"n" : "濮陽市"
}, {
"id" : 161,
"n" : "許昌市"
}, {
"id" : 162,
"n" : "漯河市"
}, {
"id" : 163,
"n" : "三門峽市"
}, {
"id" : 164,
"n" : "南陽市"
}, {
"id" : 165,
"n" : "商丘市"
}, {
"id" : 166,
"n" : "信陽市"
}, {
"id" : 167,
"n" : "周口市"
}, {
"id" : 168,
"n" : "駐馬店市"
}
]
}, {
"id" : 17,
"n" : "湖北省",
"citys" : [{
"id" : 169,
"n" : "武漢市"
}, {
"id" : 170,
"n" : "黃石市"
}, {
"id" : 171,
"n" : "十堰市"
}, {
"id" : 172,
"n" : "宜昌市"
}, {
"id" : 173,
"n" : "襄樊市"
}, {
"id" : 174,
"n" : "鄂州市"
}, {
"id" : 175,
"n" : "荊門市"
}, {
"id" : 176,
"n" : "孝感市"
}, {
"id" : 177,
"n" : "荊州市"
}, {
"id" : 178,
"n" : "黃岡市"
}, {
"id" : 179,
"n" : "咸寧市"
}, {
"id" : 180,
"n" : "隨州市"
}, {
"id" : 181,
"n" : "恩施土家族苗族自治州"
}, {
"id" : 182,
"n" : "神農架"
}
]
}, {
"id" : 18,
"n" : "湖南省",
"citys" : [{
"id" : 183,
"n" : "長沙市"
}, {
"id" : 184,
"n" : "株洲市"
}, {
"id" : 185,
"n" : "湘潭市"
}, {
"id" : 186,
"n" : "衡陽市"
}, {
"id" : 187,
"n" : "邵陽市"
}, {
"id" : 188,
"n" : "岳陽市"
}, {
"id" : 189,
"n" : "常德市"
}, {
"id" : 190,
"n" : "張家界市"
}, {
"id" : 191,
"n" : "益陽市"
}, {
"id" : 192,
"n" : "郴州市"
}, {
"id" : 193,
"n" : "永州市"
}, {
"id" : 194,
"n" : "懷化市"
}, {
"id" : 195,
"n" : "婁底市"
}, {
"id" : 196,
"n" : "湘西土家族苗族自治州"
}
]
}, {
"id" : 19,
"n" : "廣東省",
"citys" : [{
"id" : 197,
"n" : "廣州市"
}, {
"id" : 198,
"n" : "韶關市"
}, {
"id" : 199,
"n" : "深圳市"
}, {
"id" : 200,
"n" : "珠海市"
}, {
"id" : 201,
"n" : "汕頭市"
}, {
"id" : 202,
"n" : "佛山市"
}, {
"id" : 203,
"n" : "江門市"
}, {
"id" : 204,
"n" : "湛江市"
}, {
"id" : 205,
"n" : "茂名市"
}, {
"id" : 206,
"n" : "肇慶市"
}, {
"id" : 207,
"n" : "惠州市"
}, {
"id" : 208,
"n" : "梅州市"
}, {
"id" : 209,
"n" : "汕尾市"
}, {
"id" : 210,
"n" : "河源市"
}, {
"id" : 211,
"n" : "陽江市"
}, {
"id" : 212,
"n" : "清遠市"
}, {
"id" : 213,
"n" : "東莞市"
}, {
"id" : 214,
"n" : "中山市"
}, {
"id" : 215,
"n" : "潮州市"
}, {
"id" : 216,
"n" : "揭陽市"
}, {
"id" : 217,
"n" : "雲浮市"
}
]
}, {
"id" : 20,
"n" : "廣西壯族自治區",
"citys" : [{
"id" : 218,
"n" : "南寧市"
}, {
"id" : 219,
"n" : "柳州市"
}, {
"id" : 220,
"n" : "桂林市"
}, {
"id" : 221,
"n" : "梧州市"
}, {
"id" : 222,
"n" : "北海市"
}, {
"id" : 223,
"n" : "防城港市"
}, {
"id" : 224,
"n" : "欽州市"
}, {
"id" : 225,
"n" : "貴港市"
}, {
"id" : 226,
"n" : "玉林市"
}, {
"id" : 227,
"n" : "百色市"
}, {
"id" : 228,
"n" : "賀州市"
}, {
"id" : 229,
"n" : "河池市"
}, {
"id" : 230,
"n" : "來賓市"
}, {
"id" : 231,
"n" : "崇左市"
}
]
}, {
"id" : 21,
"n" : "海南省",
"citys" : [{
"id" : 232,
"n" : "海口市"
}, {
"id" : 233,
"n" : "三亞市"
}
]
}, {
"id" : 22,
"n" : "重慶市",
"citys" : [{
"id" : 234,
"n" : "重慶市"
}
]
}, {
"id" : 23,
"n" : "四川省",
"citys" : [{
"id" : 235,
"n" : "成都市"
}, {
"id" : 236,
"n" : "自貢市"
}, {
"id" : 237,
"n" : "攀枝花市"
}, {
"id" : 238,
"n" : "瀘州市"
}, {
"id" : 239,
"n" : "德陽市"
}, {
"id" : 240,
"n" : "綿陽市"
}, {
"id" : 241,
"n" : "廣元市"
}, {
"id" : 242,
"n" : "遂寧市"
}, {
"id" : 243,
"n" : "內江市"
}, {
"id" : 244,
"n" : "樂山市"
}, {
"id" : 245,
"n" : "南充市"
}, {
"id" : 246,
"n" : "眉山市"
}, {
"id" : 247,
"n" : "宜賓市"
}, {
"id" : 248,
"n" : "廣安市"
}, {
"id" : 249,
"n" : "達州市"
}, {
"id" : 250,
"n" : "雅安市"
}, {
"id" : 251,
"n" : "巴中市"
}, {
"id" : 252,
"n" : "資陽市"
}, {
"id" : 253,
"n" : "阿壩藏族羌族自治州"
}, {
"id" : 254,
"n" : "甘孜藏族自治州"
}, {
"id" : 255,
"n" : "涼山彝族自治州"
}
]
}, {
"id" : 24,
"n" : "貴州省",
"citys" : [{
"id" : 256,
"n" : "貴陽市"
}, {
"id" : 257,
"n" : "六盤水市"
}, {
"id" : 258,
"n" : "遵義市"
}, {
"id" : 259,
"n" : "安順市"
}, {
"id" : 260,
"n" : "銅仁地區"
}, {
"id" : 261,
"n" : "黔西南布依族苗族自治州"
}, {
"id" : 262,
"n" : "畢節地區"
}, {
"id" : 263,
"n" : "黔東南苗族侗族自治州"
}, {
"id" : 264,
"n" : "黔南布依族苗族自治州"
}
]
}, {
"id" : 25,
"n" : "雲南省",
"citys" : [{
"id" : 265,
"n" : "昆明市"
}, {
"id" : 266,
"n" : "曲靖市"
}, {
"id" : 267,
"n" : "玉溪市"
}, {
"id" : 268,
"n" : "保山市"
}, {
"id" : 269,
"n" : "昭通市"
}, {
"id" : 270,
"n" : "麗江市"
}, {
"id" : 271,
"n" : "思茅市"
}, {
"id" : 272,
"n" : "臨滄市"
}, {
"id" : 273,
"n" : "楚雄彝族自治州"
}, {
"id" : 274,
"n" : "紅河哈尼族彝族自治州"
}, {
"id" : 275,
"n" : "文山壯族苗族自治州"
}, {
"id" : 276,
"n" : "西雙版納傣族自治州"
}, {
"id" : 277,
"n" : "大理白族自治州"
}, {
"id" : 278,
"n" : "德宏傣族景頗族自治州"
}, {
"id" : 279,
"n" : "怒江傈僳族自治州"
}, {
"id" : 280,
"n" : "迪慶藏族自治州"
}
]
}, {
"id" : 26,
"n" : "西藏自治區",
"citys" : [{
"id" : 281,
"n" : "拉薩市"
}, {
"id" : 282,
"n" : "昌都地區"
}, {
"id" : 283,
"n" : "山南地區"
}, {
"id" : 284,
"n" : "日喀則地區"
}, {
"id" : 285,
"n" : "那曲地區"
}, {
"id" : 286,
"n" : "阿里地區"
}, {
"id" : 287,
"n" : "林芝地區"
}
]
}, {
"id" : 27,
"n" : "陝西省",
"citys" : [{
"id" : 288,
"n" : "西安市"
}, {
"id" : 289,
"n" : "銅川市"
}, {
"id" : 290,
"n" : "寶雞市"
}, {
"id" : 291,
"n" : "咸陽市"
}, {
"id" : 292,
"n" : "渭南市"
}, {
"id" : 293,
"n" : "延安市"
}, {
"id" : 294,
"n" : "漢中市"
}, {
"id" : 295,
"n" : "榆林市"
}, {
"id" : 296,
"n" : "安康市"
}, {
"id" : 297,
"n" : "商洛市"
}
]
}, {
"id" : 28,
"n" : "甘肅省",
"citys" : [{
"id" : 298,
"n" : "蘭州市"
}, {
"id" : 299,
"n" : "嘉峪關市"
}, {
"id" : 300,
"n" : "金昌市"
}, {
"id" : 301,
"n" : "白銀市"
}, {
"id" : 302,
"n" : "天水市"
}, {
"id" : 303,
"n" : "武威市"
}, {
"id" : 304,
"n" : "張掖市"
}, {
"id" : 305,
"n" : "平涼市"
}, {
"id" : 306,
"n" : "酒泉市"
}, {
"id" : 307,
"n" : "慶陽市"
}, {
"id" : 308,
"n" : "定西市"
}, {
"id" : 309,
"n" : "隴南市"
}, {
"id" : 310,
"n" : "臨夏回族自治州"
}, {
"id" : 311,
"n" : "甘南藏族自治州"
}
]
}, {
"id" : 29,
"n" : "青海省",
"citys" : [{
"id" : 312,
"n" : "西寧市"
}, {
"id" : 313,
"n" : "海東地區"
}, {
"id" : 314,
"n" : "海北藏族自治州"
}, {
"id" : 315,
"n" : "黃南藏族自治州"
}, {
"id" : 316,
"n" : "海南藏族自治州"
}, {
"id" : 317,
"n" : "果洛藏族自治州"
}, {
"id" : 318,
"n" : "玉樹藏族自治州"
}, {
"id" : 319,
"n" : "海西蒙古族藏族自治州"
}
]
}, {
"id" : 30,
"n" : "寧夏回族自治區",
"citys" : [{
"id" : 320,
"n" : "銀川市"
}, {
"id" : 321,
"n" : "石嘴山市"
}, {
"id" : 322,
"n" : "吳忠市"
}, {
"id" : 323,
"n" : "固原市"
}, {
"id" : 324,
"n" : "中衛市"
}
]
}, {
"id" : 31,
"n" : "新疆維吾爾自治區",
"citys" : [{
"id" : 325,
"n" : "烏魯木齊市"
}, {
"id" : 326,
"n" : "克拉瑪依市"
}, {
"id" : 327,
"n" : "吐魯番地區"
}, {
"id" : 328,
"n" : "哈密地區"
}, {
"id" : 329,
"n" : "昌吉回族自治州"
}, {
"id" : 330,
"n" : "博爾塔拉蒙古自治州"
}, {
"id" : 331,
"n" : "巴音郭楞蒙古自治州"
}, {
"id" : 332,
"n" : "阿克蘇地區"
}, {
"id" : 333,
"n" : "克孜勒蘇柯爾克孜自治州"
}, {
"id" : 334,
"n" : "喀什地區"
}, {
"id" : 335,
"n" : "和田地區"
}, {
"id" : 336,
"n" : "伊犁哈薩克自治州"
}, {
"id" : 337,
"n" : "塔城地區"
}, {
"id" : 338,
"n" : "阿勒泰地區"
}, {
"id" : 339,
"n" : "石河子市"
}, {
"id" : 340,
"n" : "阿拉爾市"
}, {
"id" : 341,
"n" : "圖木舒克市"
}, {
"id" : 342,
"n" : "五家渠市"
}
]
}, {
"id" : 32,
"n" : "香港特別行政區",
"citys" : [{
"id" : 343,
"n" : "香港特別行政區"
}
]
}, {
"id" : 33,
"n" : "澳門特別行政區",
"citys" : [{
"id" : 344,
"n" : "澳門特別行政區"
}
]
}, {
"id" : 34,
"n" : "臺灣省",
"citys" : [{
"id" : 345,
"n" : "臺灣省"
}
]
}
];
</script>
<script type="text/javascript">
function areaClass(cmbProvinceId, cmbCityId, cmbCountyId, allAreaJson) {
var $this = this;
this.cmbProvince = document.getElementById(cmbProvinceId);
this.cmbCity = (cmbCityId == null || cmbCityId == '') ? null : document.getElementById(cmbCityId);
this.cmbCounty = (cmbCountyId == null || cmbCountyId == '') ? null : document.getElementById(cmbCountyId);
this.areaJson = allAreaJson;
this.defaultFirstDefaultCountyItem = {"id":0,"n":"---請選擇---"};
this.defaultFirstDefaultCityItem = {"id":0,"n":"---請選擇---","countys":[]};
this.defaultFirstDefaultProviceItem = {"id":0,"n":"---請選擇---","citys":[]};
this.initialize = function () {
$this.cmbProvince.options.length = 0;
$this.cmbProvince.onchange = null;
$this.addProvinceOption($this.defaultFirstDefaultProviceItem);
for(var i=0; i<$this.areaJson.length; i++) {
$this.addProvinceOption($this.areaJson[i]);
}
if($this.cmbCity != null) {
$this.cmbCity.selectedIndex = 0;
}
$this.changeProvince();
$this.cmbProvince.onchange = $this.changeProvince;
if($this.cmbCity != null) {
$this.changeCity();
$this.cmbCity.onchange = $this.changeCity;
}
};
this.addProvinceOption = function(jsonProvince) { // {"id":1,"n":"北京市","citys":[{"id":1,"n":"北京市","countys":[]}]}
var option = document.createElement("option");
$this.cmbProvince.options.add(option);
option.innerHTML = jsonProvince.n;
option.value = jsonProvince.id;
option.obj = jsonProvince;
};
this.addCityOption = function(jsonCity) { // {"id":1,"n":"北京市","countys":[]}}
var option = document.createElement("option");
$this.cmbCity.options.add(option);
option.innerHTML = jsonCity.n;
option.value = jsonCity.id;
option.obj = jsonCity;
};
this.addCountyOption = function(jsonCounty) { // {"id":1,"n":"北京市"}}
var option = document.createElement("option");
$this.cmbCounty.options.add(option);
option.innerHTML = jsonCounty.n;
option.value = jsonCounty.id;
};
this.cmbSelectById = function(cmb, id) {
for(var i=0; i<cmb.options.length; i++) {
if(cmb.options[i].value == id+'') {
cmb.selectedIndex = i;
break;
}
}
};
this.cmbSelectProvinceById = function(id) {
$this.cmbSelectById($this.cmbProvince, id);
$this.changeProvince();
};
this.cmbSelectCityById = function(id) {
$this.cmbSelectById($this.cmbCity, id);
$this.changeCity();
};
this.cmbSelectCountyById = function(id) {
$this.cmbSelectById($this.cmbCounty, id);
};
this.changeProvince = function() {
if($this.cmbCity == null) return;
$this.cmbCity.options.length = 0;
//$this.cmbCity.onchange = null;
if($this.cmbProvince.selectedIndex == -1) return;
$this.addCityOption($this.defaultFirstDefaultCityItem);
var item = $this.cmbProvince.options[$this.cmbProvince.selectedIndex].obj;
if(item.citys != null) {
for(var i=0; i<item.citys.length; i++) {
$this.addCityOption(item.citys[i]);
}
}
$this.cmbCity.selectedIndex = 0;
};
this.changeCity = function() {
if($this.cmbCounty == null) return;
$this.cmbCounty.options.length = 0;
$this.cmbCounty.onchange = null;
if($this.cmbCity.selectedIndex == -1) return;
$this.addCountyOption($this.defaultFirstDefaultCountyItem);
var item = $this.cmbCity.options[$this.cmbCity.selectedIndex].obj;
if(item.countys != null) {
for(var i=0; i<item.countys.length; i++) {
$this.addCountyOption(item.countys[i]);
}
}
$this.cmbCounty.selectedIndex = 0;
//$this.changeProvince();
};
this.IndexOf = function(cmb, id) {
var idx = -1;
for(var i=0; i<cmb.options.length; i++) {
if(cmb.options[i].value == id+'') {
idx = i;
break;
}
}
return idx;
}
this.IndexOfProvince = function(id) {
return $this.IndexOf($this.cmbProvince, id);
};
this.IndexOfCity = function(id) {
return $this.IndexOf($this.cmbCity, id);
};
this.IndexOfCounty = function(id) {
return $this.IndexOf($this.cmbCounty, id);
};
$this.initialize();
}
</script>
<style>
fieldset {color:#333333;border: 1px solid #e4e4e4; padding:5px;width:600px;margin-top:5px;}
div {color:#333333;line-height:28px;}
</style>
</head>
<body>
<fieldset>
<legend>聯動 1</legend>
<div>
省：<select id="cmbProvince"></select>
市：<select id="cmbCity"></select>
縣：<select id="cmbCounty"></select>
</div>
</fieldset>
<fieldset>
<legend>聯動 2</legend>
<div>
省：<select id="cmbProvince2"></select>
市：<select id="cmbCity2"></select>
</div>
</fieldset>
<fieldset>
<legend>聯動 3</legend>
<div>
省：<select id="cmbProvince3"></select>
</div>
</fieldset>
<p>
</p>
<script type="text/javascript">
// 聯動1
var area = new areaClass("cmbProvince", "cmbCity", "cmbCounty", areas);
area.cmbSelectProvinceById(3);
area.cmbSelectCityById(3);
// 聯動2
var area2 = new areaClass("cmbProvince2", "cmbCity2", null, areas);
area2.cmbSelectProvinceById(1);
area2.cmbSelectCityById(1);
// 聯動3
var area3 = new areaClass("cmbProvince3", null, null, areas);
area3.cmbSelectProvinceById(3);
</script>
</body>
</html>