直接上代码：
<!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>
3055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
