这篇文章主要介绍了 js 下省份级联效果,需要的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这是从本人以前博客带过来的,感觉这个还蛮实用,代码分享下:
province.html:
- <html>
- <head>
- <title>
- 省份与省市级联
- </title>
- </head>
- <script language="javascript" src="province.js" type="text/javascript"
- charset="gb2312">
- </script>
- </script>
- <body onload='getProvince()'>
- <div id='province'>
- <select>
- <option>
- 省份
- </option>
- </select>
- </div>
- <div id='city'>
- <select>
- <option>
- 城市
- </option>
- </select>
- </div>
- </boydy>
- </html>
province.js:
- var sity;
- city = new Array(34);
- city[0] = new Array(19);
- city[0][0] = "北京";
- city[0][1] = "东城";
- city[0][2] = "西城";
- city[0][3] = "宣武";
- city[0][4] = "朝阳";
- city[0][5] = "崇文";
- city[0][6] = "海淀";
- city[0][7] = "丰台";
- city[0][8] = "石景山";
- city[0][9] = "通州";
- city[0][10] = "平谷";
- city[0][11] = "顺义";
- city[0][12] = "怀柔";
- city[0][13] = "密云";
- city[0][14] = "延庆";
- city[0][15] = "昌平";
- city[0][16] = "门头沟";
- city[0][17] = "房山";
- city[0][18] = "大兴";
- city[1] = new Array(12);
- city[1][0] = "上海";
- city[1][1] = "近郊";
- city[1][2] = "闵行";
- city[1][3] = "浦东";
- city[1][4] = "南汇";
- city[1][5] = "奉贤";
- city[1][6] = "金山";
- city[1][7] = "松江";
- city[1][8] = "青浦";
- city[1][9] = "嘉定";
- city[1][10] = "宝山";
- city[1][11] = "崇明";
- city[2] = new Array(8);
- city[2][0] = "天津";
- city[2][1] = "塘沽";
- city[2][2] = "汉沽";
- city[2][3] = "宁河";
- city[2][4] = "静海";
- city[2][5] = "武清";
- city[2][6] = "宝坻";
- city[2][7] = "蓟县";
- city[3] = new Array(1);
- city[3][0] = "重庆";
- city[4] = new Array(14);
- city[4][0] = "内蒙古";
- city[4][1] = "呼和浩特";
- city[4][2] = "集宁";
- city[4][3] = "包头";
- city[4][4] = "临河";
- city[4][5] = "乌海";
- city[4][6] = "东胜";
- city[4][7] = "海拉尔";
- city[4][8] = "赤峰";
- city[4][9] = "锡林浩特";
- city[4][10] = "太仆寺旗";
- city[4][11] = "通辽";
- city[4][12] = "阿拉善盟";
- city[4][13] = "白城";
- city[5] = new Array(12);
- city[5][0] = "河北";
- city[5][1] = "石家庄";
- city[5][2] = "衡水";
- city[5][3] = "邢台";
- city[5][4] = "邯郸";
- city[5][5] = "沧州";
- city[5][6] = "唐山";
- city[5][7] = "廊坊";
- city[5][8] = "秦皇岛";
- city[5][9] = "承德";
- city[5][10] = "保定";
- city[5][11] = "张家口";
- city[6] = new Array(13);
- city[6][0] = "辽宁";
- city[6][1] = "沈阳";
- city[6][2] = "铁岭";
- city[6][3] = "抚顺";
- city[6][4] = "鞍山";
- city[6][5] = "营口";
- city[6][6] = "大连";
- city[6][7] = "本溪";
- city[6][8] = "丹东";
- city[6][9] = "锦州";
- city[6][10] = "朝阳";
- city[6][11] = "阜新";
- city[6][12] = "盘锦";
- city[7] = new Array(9);
- city[7][0] = "吉林";
- city[7][1] = "长春";
- city[7][2] = "吉林";
- city[7][3] = "延吉";
- city[7][4] = "通化";
- city[7][5] = "梅河口";
- city[7][6] = "四平";
- city[7][7] = "白城";
- city[7][8] = "松原";
- city[8] = new Array(9);
- city[8][0] = "黑龙江";
- city[8][1] = "哈尔滨";
- city[8][2] = "绥化";
- city[8][3] = "佳木斯";
- city[8][4] = "牡丹江";
- city[8][5] = "齐齐哈尔";
- city[8][6] = "大庆";
- city[8][7] = "北安";
- city[8][8] = "大兴安岭";
- city[9] = new Array(12);
- city[9][0] = "江苏";
- city[9][1] = "南京";
- city[9][2] = "镇江";
- city[9][3] = "常州";
- city[9][4] = "无锡";
- city[9][5] = "苏州";
- city[9][6] = "徐州";
- city[9][7] = "连云港";
- city[9][8] = "淮阴";
- city[9][9] = "盐城";
- city[9][10] = "扬州";
- city[9][11] = "南通";
- city[10] = new Array(12);
- city[10][0] = "安徽";
- city[10][1] = "合肥";
- city[10][2] = "淮南";
- city[10][3] = "蚌埠";
- city[10][4] = "宿州";
- city[10][5] = "阜阳";
- city[10][6] = "六安";
- city[10][7] = "巢湖";
- city[10][8] = "滁州";
- city[10][9] = "芜湖";
- city[10][10] = "屯溪";
- city[10][11] = "安庆";
- city[11] = new Array(14);
- city[11][0] = "山东";
- city[11][1] = "济南";
- city[11][2] = "聊城";
- city[11][3] = "德州";
- city[11][4] = "淄博";
- city[11][5] = "东营";
- city[11][6] = "潍坊";
- city[11][7] = "烟台";
- city[11][8] = "青岛";
- city[11][9] = "泰安";
- city[11][10] = "济宁";
- city[11][11] = "荷泽";
- city[11][12] = "临沂";
- city[11][13] = "枣庄";
- city[12] = new Array(12);
- city[12][0] = "浙江";
- city[12][1] = "杭州";
- city[12][2] = "绍兴";
- city[12][3] = "湖州";
- city[12][4] = "嘉兴";
- city[12][5] = "宁波";
- city[12][6] = "舟山";
- city[12][7] = "台州";
- city[12][8] = "金华";
- city[12][9] = "丽水";
- city[12][10] = "衢州";
- city[12][11] = "温州";
- city[13] = new Array(11);
- city[13][0] = "江西";
- city[13][1] = "南昌";
- city[13][2] = "九江";
- city[13][3] = "景德镇";
- city[13][4] = "上饶";
- city[13][5] = "鹰潭";
- city[13][6] = "宜春";
- city[13][7] = "萍乡";
- city[13][8] = "赣州";
- city[13][9] = "吉安";
- city[13][10] = "抚州";
- city[14] = new Array(10);
- city[14][0] = "福建";
- city[14][1] = "福州";
- city[14][2] = "南平";
- city[14][3] = "邵武";
- city[14][4] = "福安";
- city[14][5] = "厦门";
- city[14][6] = "泉州";
- city[14][7] = "漳州";
- city[14][8] = "龙岩";
- city[14][9] = "三明";
- city[15] = new Array(14);
- city[15][0] = "湖南";
- city[15][1] = "长沙";
- city[15][2] = "株洲";
- city[15][3] = "益阳";
- city[15][4] = "岳阳";
- city[15][5] = "常德";
- city[15][6] = "吉首";
- city[15][7] = "娄底";
- city[15][8] = "怀化";
- city[15][9] = "衡阳";
- city[15][10] = "邵阳";
- city[15][11] = "郴州";
- city[15][12] = "零陵";
- city[15][13] = "张家界";
- city[16] = new Array(10);
- city[16][0] = "湖北";
- city[16][1] = "武汉";
- city[16][2] = "沙市";
- city[16][3] = "黄石";
- city[16][4] = "鄂州";
- city[16][5] = "咸宁";
- city[16][6] = "襄樊";
- city[16][7] = "十堰";
- city[16][8] = "宜昌";
- city[16][9] = "恩施";
- city[17] = new Array(15);
- city[17][0] = "河南";
- city[17][1] = "郑州";
- city[17][2] = "新乡";
- city[17][3] = "安阳";
- city[17][4] = "许昌";
- city[17][5] = "漯河";
- city[17][6] = "驻马店";
- city[17][7] = "信阳";
- city[17][8] = "周口";
- city[17][9] = "平顶山";
- city[17][10] = "洛阳";
- city[17][11] = "三门峡";
- city[17][12] = "南阳";
- city[17][13] = "开封";
- city[17][14] = "商丘";
- city[18] = new Array(12);
- city[18][0] = "广东";
- city[18][1] = "广州";
- city[18][2] = "韶关";
- city[18][3] = "英德";
- city[18][4] = "梅州";
- city[18][5] = "汕头";
- city[18][6] = "惠州";
- city[18][7] = "深圳";
- city[18][8] = "湛江";
- city[18][9] = "茂名";
- city[18][10] = "肇庆";
- city[18][11] = "佛山";
- city[19] = new Array(9);
- city[19][0] = "广西";
- city[19][1] = "南宁";
- city[19][2] = "百色";
- city[19][3] = "钦州";
- city[19][4] = "玉林";
- city[19][5] = "桂林";
- city[19][6] = "梧州";
- city[19][7] = "柳州";
- city[19][8] = "河池";
- city[20] = new Array(8);
- city[20][0] = "贵州";
- city[20][1] = "贵阳";
- city[20][2] = "六盘水";
- city[20][3] = "玉屏";
- city[20][4] = "凯里";
- city[20][5] = "都匀";
- city[20][6] = "安顺";
- city[20][7] = "遵义";
- city[21] = new Array(16);
- city[21][0] = "四川";
- city[21][1] = "成都";
- city[21][2] = "乐山";
- city[21][3] = "凉山";
- city[21][4] = "渡口";
- city[21][5] = "绵阳";
- city[21][6] = "汶川";
- city[21][7] = "雅安";
- city[21][8] = "甘孜";
- city[21][9] = "广元";
- city[21][10] = "南充";
- city[21][11] = "达州";
- city[21][12] = "内江";
- city[21][13] = "自贡";
- city[21][14] = "宜宾";
- city[21][15] = "泸州";
- city[22] = new Array(13);
- city[22][0] = "云南";
- city[22][1] = "昆明";
- city[22][2] = "曲靖";
- city[22][3] = "昭通";
- city[22][4] = "开远";
- city[22][5] = "文山";
- city[22][6] = "思茅";
- city[22][7] = "大理";
- city[22][8] = "楚雄";
- city[22][9] = "临沧";
- city[22][10] = "保山";
- city[22][11] = "六盘水";
- city[22][12] = "渡口";
- city[23] = new Array(11);
- city[23][0] = "陕西";
- city[23][1] = "西安";
- city[23][2] = "渭南";
- city[23][3] = "延安";
- city[23][4] = "绥德";
- city[23][5] = "榆林";
- city[23][6] = "宝鸡";
- city[23][7] = "汉中";
- city[23][8] = "安康";
- city[23][9] = "商洛";
- city[23][10] = "铜川";
- city[24] = new Array(13);
- city[24][0] = "甘肃";
- city[24][1] = "兰州";
- city[24][2] = "武威";
- city[24][3] = "张掖";
- city[24][4] = "酒泉";
- city[24][5] = "安西";
- city[24][6] = "金昌";
- city[24][7] = "天水";
- city[24][8] = "定西";
- city[24][9] = "平凉";
- city[24][10] = "西峰";
- city[24][11] = "陇西";
- city[24][12] = "甘南";
- city[25] = new Array(5);
- city[25][0] = "宁夏";
- city[25][1] = "银川";
- city[25][2] = "吴忠";
- city[25][3] = "石咀山";
- city[25][4] = "固原";
- city[26] = new Array(7);
- city[26][0] = "青海";
- city[26][1] = "西宁";
- city[26][2] = "果洛";
- city[26][3] = "玉树";
- city[26][4] = "格尔木";
- city[26][5] = "海西";
- city[26][6] = "阿坝";
- city[27] = new Array(11);
- city[27][0] = "新疆";
- city[27][1] = "乌鲁木齐";
- city[27][2] = "石河子";
- city[27][3] = "乌苏";
- city[27][4] = "克拉玛依";
- city[27][5] = "伊宁";
- city[27][6] = "吐鲁番";
- city[27][7] = "哈密";
- city[27][8] = "巴音郭楞";
- city[27][9] = "阿克苏";
- city[27][10] = "喀什";
- city[28] = new Array(8);
- city[28][0] = "西藏";
- city[28][1] = "拉萨";
- city[28][2] = "那曲";
- city[28][3] = "昌都";
- city[28][4] = "山南";
- city[28][5] = "日喀则";
- city[28][6] = "阿里";
- city[28][7] = "林芝";
- city[29] = new Array(4);
- city[29][0] = "海南";
- city[29][1] = "海口";
- city[29][2] = "三亚";
- city[29][3] = "海南";
- city[30] = new Array(12);
- city[30][0] = "山西";
- city[30][1] = "太原";
- city[30][2] = "离石";
- city[30][3] = "忻州";
- city[30][4] = "宁武";
- city[30][5] = "大同";
- city[30][6] = "临汾";
- city[30][7] = "侯马";
- city[30][8] = "运城";
- city[30][9] = "阳泉";
- city[30][10] = "长治";
- city[30][11] = "晋城";
- city[31] = new Array(17);
- city[31][0] = "台湾";
- city[31][1] = "台北";
- city[31][2] = "台中";
- city[31][3] = "基隆";
- city[31][4] = "台南";
- city[31][5] = "嘉义";
- city[31][6] = "桃园";
- city[31][7] = "苗粟";
- city[31][8] = "屏东";
- city[31][9] = "南投";
- city[31][10] = "花莲";
- city[31][11] = "新竹";
- city[31][12] = "彰化";
- city[31][13] = "高雄";
- city[31][14] = "宜兰";
- city[31][15] = "台东";
- city[31][16] = "彭湖";
- city[32] = new Array(1);
- city[32][0] = "香港";
- city[33] = new Array(1);
- city[33][0] = "澳门";
- function getRegion() { document.getElementById("city").innerHTML = "";
- var provinces = document.getElementById("provinces");
- var prov = provinces[provinces.selectedIndex].value;
- var str = "<select>";
- for (var i = 0; i < city[prov].length; i++) { str = str + "<option>" + city[prov][i] + "</option>";
- } str = str + "</select>"; document.getElementById("city").innerHTML = str;
- }
- function getProvince() {
- var strs = "<select onchange='getRegion()' id='provinces'><option></option>";
- for (var i = 0; i <= 33; i++) { strs = strs + "<option value=" + i + ">" + city[i][0] + "</option>";
- } strs = strs + "</select>"; document.getElementById('province').innerHTML = strs;
- }
来源: