js实现的城市级联效果

最新推荐文章于 2024-12-23 09:42:55 发布

weixin_34038652

最新推荐文章于 2024-12-23 09:42:55 发布

阅读量101

点赞数

City.js
var groups = 34;
var group = new Array(groups);
for (i = 0; i < groups; i++) {
    group[i] = new Array()
}

group[0][0] = new Option("合肥", "8");
group[0][1] = new Option("芜湖", "16");
group[0][2] = new Option("马鞍山", "13");
group[0][3] = new Option("蚌埠", "2");
group[0][4] = new Option("淮南", "10");
group[0][5] = new Option("淮北", "9");
group[0][6] = new Option("铜陵", "15");
group[0][7] = new Option("安庆", "1");
group[0][8] = new Option("黄山", "11");
group[0][9] = new Option("滁州", "6");
group[0][10] = new Option("阜阳", "7");
group[0][11] = new Option("宿州", "14");
group[0][12] = new Option("巢湖", "4");
group[0][13] = new Option("宣城", "17");
group[0][14] = new Option("亳州", "3");
group[0][15] = new Option("池州", "5");
group[0][16] = new Option("六安", "12");

group[1][0] = new Option("澳门", "18");

group[2][0] = new Option("北京", "19");

group[3][0] = new Option("福州", "20");
group[3][1] = new Option("泉州", "25");
group[3][2] = new Option("漳州", "28");
group[3][3] = new Option("三明", "26");
group[3][4] = new Option("厦门", "27");
group[3][5] = new Option("南平", "22");
group[3][6] = new Option("龙岩", "21");
group[3][7] = new Option("莆田", "24");
group[3][8] = new Option("宁德", "23");

group[4][0] = new Option("兰州", "35");
group[4][1] = new Option("临夏", "36");
group[4][2] = new Option("平凉", "38");
group[4][3] = new Option("庆阳", "39");
group[4][4] = new Option("武威", "41");
group[4][5] = new Option("张掖", "42");
group[4][6] = new Option("酒泉", "34");
group[4][7] = new Option("天水", "40");
group[4][8] = new Option("定西", "30");
group[4][9] = new Option("陇南", "37");
group[4][10] = new Option("白银", "29");
group[4][11] = new Option("嘉峪关", "32");
group[4][12] = new Option("金昌", "33");
group[4][13] = new Option("甘南", "31");

group[5][0] = new Option("广州", "46");
group[5][1] = new Option("深圳", "57");
group[5][2] = new Option("佛山", "45");
group[5][3] = new Option("汕头", "54");
group[5][4] = new Option("湛江", "60");
group[5][5] = new Option("珠海", "63");
group[5][6] = new Option("东莞", "44");
group[5][7] = new Option("韶关", "56");
group[5][8] = new Option("中山", "62");
group[5][9] = new Option("江门", "49");
group[5][10] = new Option("肇庆", "61");
group[5][11] = new Option("梅州", "52");
group[5][12] = new Option("惠州", "48");
group[5][13] = new Option("潮州", "43");
group[5][14] = new Option("河源", "47");
group[5][15] = new Option("汕尾", "55");
group[5][16] = new Option("清远", "53");
group[5][17] = new Option("揭阳", "50");
group[5][18] = new Option("茂名", "51");
group[5][19] = new Option("云浮", "59");
group[5][20] = new Option("阳江", "58");

group[6][0] = new Option("南宁", "74");
group[6][1] = new Option("桂林", "69");
group[6][2] = new Option("柳州", "73");
group[6][3] = new Option("梧州", "76");
group[6][4] = new Option("北海", "65");
group[6][5] = new Option("百色", "64");
group[6][6] = new Option("钦州", "75");
group[6][7] = new Option("河池", "70");
group[6][8] = new Option("玉林", "77");
group[6][9] = new Option("防城港", "67");
group[6][10] = new Option("贵港", "68");
group[6][11] = new Option("贺州", "71");
group[6][12] = new Option("来宾", "72");
group[6][13] = new Option("崇左", "66");

group[7][0] = new Option("贵阳", "80");
group[7][1] = new Option("六盘水", "81");
group[7][2] = new Option("遵义", "86");
group[7][3] = new Option("安顺", "78");
group[7][4] = new Option("毕节", "79");
group[7][5] = new Option("黔东南", "82");
group[7][6] = new Option("黔南", "83");
group[7][7] = new Option("黔西南", "84");
group[7][8] = new Option("铜仁", "85");

group[8][0] = new Option("海口", "94");
group[8][1] = new Option("三亚", "100");
group[8][2] = new Option("白沙", "87");
group[8][3] = new Option("琼海", "98");
group[8][4] = new Option("保亭", "88");
group[8][5] = new Option("昌江", "89");
group[8][6] = new Option("澄迈", "90");
group[8][7] = new Option("儋州", "91");
group[8][8] = new Option("定安", "92");
group[8][9] = new Option("东方", "93");
group[8][10] = new Option("乐东", "95");
group[8][11] = new Option("临高", "96");
group[8][12] = new Option("陵水", "97");
group[8][13] = new Option("琼中", "99");
group[8][14] = new Option("屯昌", "101");
group[8][15] = new Option("万宁", "102");
group[8][16] = new Option("文昌", "103");
group[8][17] = new Option("五指山", "104");

group[9][0] = new Option("石家庄", "112");
group[9][1] = new Option("唐山", "113");
group[9][2] = new Option("保定", "105");
group[9][3] = new Option("邯郸", "108");
group[9][4] = new Option("沧州", "106");
group[9][5] = new Option("邢台", "114");
group[9][6] = new Option("廊坊", "110");
group[9][7] = new Option("衡水", "109");
group[9][8] = new Option("秦皇岛", "111");
group[9][9] = new Option("张家口", "115");
group[9][10] = new Option("承德", "107");

group[10][0] = new Option("郑州", "131");
group[10][1] = new Option("洛阳", "121");
group[10][2] = new Option("南阳", "123");
group[10][3] = new Option("许昌", "130");
group[10][4] = new Option("新乡", "128");
group[10][5] = new Option("周口", "132");
group[10][6] = new Option("商丘", "127");
group[10][7] = new Option("安阳", "116");
group[10][8] = new Option("平顶山", "124");
group[10][9] = new Option("驻马店", "133");
group[10][10] = new Option("开封", "120");
group[10][11] = new Option("漯河", "122");
group[10][12] = new Option("鹤壁", "117");
group[10][13] = new Option("信阳", "129");
group[10][14] = new Option("焦作", "119");
group[10][15] = new Option("濮阳", "125");
group[10][16] = new Option("三门峡", "126");
group[10][17] = new Option("济源", "118");

group[11][0] = new Option("哈尔滨", "136");
group[11][1] = new Option("大庆", "134");
group[11][2] = new Option("齐齐哈尔", "143");
group[11][3] = new Option("大兴安岭", "135");
group[11][4] = new Option("鹤岗", "137");
group[11][5] = new Option("黑河", "138");
group[11][6] = new Option("鸡西", "139");
group[11][7] = new Option("佳木斯", "140");
group[11][8] = new Option("牡丹江", "141");
group[11][9] = new Option("七台河", "142");
group[11][10] = new Option("双鸭山", "144");
group[11][11] = new Option("绥化", "145");
group[11][12] = new Option("伊春", "146");

group[12][0] = new Option("武汉", "158");
group[12][1] = new Option("十堰", "155");
group[12][2] = new Option("襄樊", "161");
group[12][3] = new Option("黄石", "150");
group[12][4] = new Option("黄冈", "149");
group[12][5] = new Option("宜昌", "163");
group[12][6] = new Option("鄂州", "147");
group[12][7] = new Option("孝感", "162");
group[12][8] = new Option("咸宁", "160");
group[12][9] = new Option("荆门", "151");
group[12][10] = new Option("随州", "156");
group[12][11] = new Option("恩施", "148");
group[12][12] = new Option("荆州", "152");
group[12][13] = new Option("潜江", "153");
group[12][14] = new Option("神农架", "154");
group[12][15] = new Option("天门", "157");
group[12][16] = new Option("仙桃", "159");

group[13][0] = new Option("长沙", "164");
group[13][1] = new Option("株洲", "177");
group[13][2] = new Option("衡阳", "167");
group[13][3] = new Option("岳阳", "175");
group[13][4] = new Option("湘潭", "171");
group[13][5] = new Option("常德", "165");
group[13][6] = new Option("娄底", "169");
group[13][7] = new Option("张家界", "176");
group[13][8] = new Option("郴州", "166");
group[13][9] = new Option("益阳", "173");
group[13][10] = new Option("邵阳", "170");
group[13][11] = new Option("怀化", "168");
group[13][12] = new Option("永州", "174");
group[13][13] = new Option("湘西", "172");

group[14][0] = new Option("长春", "180");
group[14][1] = new Option("吉林", "181");
group[14][2] = new Option("四平", "183");
group[14][3] = new Option("辽源", "182");
group[14][4] = new Option("通化", "185");
group[14][5] = new Option("延边", "186");
group[14][6] = new Option("白城", "178");
group[14][7] = new Option("白山", "179");
group[14][8] = new Option("松原", "184");

group[15][0] = new Option("南京", "190");
group[15][1] = new Option("苏州", "192");
group[15][2] = new Option("无锡", "195");
group[15][3] = new Option("常州", "187");
group[15][4] = new Option("扬州", "198");
group[15][5] = new Option("徐州", "196");
group[15][6] = new Option("镇江", "199");
group[15][7] = new Option("南通", "191");
group[15][8] = new Option("淮安", "188");
group[15][9] = new Option("连云港", "189");
group[15][10] = new Option("盐城", "197");
group[15][11] = new Option("泰州", "194");
group[15][12] = new Option("宿迁", "193");

group[16][0] = new Option("南昌", "205");
group[16][1] = new Option("九江", "204");
group[16][2] = new Option("上饶", "207");
group[16][3] = new Option("宜春", "209");
group[16][4] = new Option("吉安", "202");
group[16][5] = new Option("赣州", "201");
group[16][6] = new Option("景德镇", "203");
group[16][7] = new Option("萍乡", "206");
group[16][8] = new Option("新余", "208");
group[16][9] = new Option("鹰潭", "210");
group[16][10] = new Option("抚州", "200");

group[17][0] = new Option("沈阳", "222");
group[17][1] = new Option("大连", "214");
group[17][2] = new Option("鞍山", "211");
group[17][3] = new Option("盘锦", "221");
group[17][4] = new Option("辽阳", "220");
group[17][5] = new Option("葫芦岛", "218");
group[17][6] = new Option("锦州", "219");
group[17][7] = new Option("抚顺", "216");
group[17][8] = new Option("铁岭", "223");
group[17][9] = new Option("本溪", "212");
group[17][10] = new Option("丹东", "215");
group[17][11] = new Option("阜新", "217");
group[17][12] = new Option("营口", "224");
group[17][13] = new Option("朝阳", "213");

group[18][0] = new Option("呼和浩特", "230");
group[18][1] = new Option("包头", "227");
group[18][2] = new Option("赤峰", "228");
group[18][3] = new Option("通辽", "232");
group[18][4] = new Option("乌海", "233");
group[18][5] = new Option("鄂尔多斯", "229");
group[18][6] = new Option("乌兰察布盟", "234");
group[18][7] = new Option("锡林郭勒盟", "235");
group[18][8] = new Option("呼伦贝尔", "231");
group[18][9] = new Option("巴彦淖尔盟", "226");
group[18][10] = new Option("阿拉善盟", "225");
group[18][11] = new Option("兴安盟", "236");

group[19][0] = new Option("银川", "240");
group[19][1] = new Option("石嘴山", "238");
group[19][2] = new Option("吴忠", "239");
group[19][3] = new Option("固原", "237");
group[19][4] = new Option("中卫", "376");

group[20][0] = new Option("西宁", "247");
group[20][1] = new Option("果洛", "241");
group[20][2] = new Option("海北", "242");
group[20][3] = new Option("海东", "243");
group[20][4] = new Option("海南", "244");
group[20][5] = new Option("海西", "245");
group[20][6] = new Option("黄南", "246");
group[20][7] = new Option("玉树", "248");

group[21][0] = new Option("济南", "253");
group[21][1] = new Option("青岛", "258");
group[21][2] = new Option("淄博", "265");
group[21][3] = new Option("烟台", "263");
group[21][4] = new Option("威海", "261");
group[21][5] = new Option("泰安", "260");
group[21][6] = new Option("临沂", "257");
group[21][7] = new Option("东营", "251");
group[21][8] = new Option("济宁", "254");
group[21][9] = new Option("枣庄", "264");
group[21][10] = new Option("德州", "250");
group[21][11] = new Option("滨州", "249");
group[21][12] = new Option("聊城", "256");
group[21][13] = new Option("潍坊", "262");
group[21][14] = new Option("日照", "259");
group[21][15] = new Option("菏泽", "252");
group[21][16] = new Option("莱芜", "255");

group[22][0] = new Option("太原", "273");
group[22][1] = new Option("大同", "267");
group[22][2] = new Option("阳泉", "275");
group[22][3] = new Option("长治", "266");
group[22][4] = new Option("晋城", "268");
group[22][5] = new Option("晋中", "269");
group[22][6] = new Option("临汾", "270");
group[22][7] = new Option("吕梁", "271");
group[22][8] = new Option("朔州", "272");
group[22][9] = new Option("忻州", "274");
group[22][10] = new Option("运城", "276");

group[23][0] = new Option("西安", "283");
group[23][1] = new Option("咸阳", "284");
group[23][2] = new Option("铜川", "281");
group[23][3] = new Option("宝鸡", "278");
group[23][4] = new Option("渭南", "282");
group[23][5] = new Option("延安", "285");
group[23][6] = new Option("汉中", "279");
group[23][7] = new Option("榆林", "286");
group[23][8] = new Option("安康", "277");
group[23][9] = new Option("商洛", "280");

group[24][0] = new Option("上海", "287");

group[25][0] = new Option("成都", "290");
group[25][1] = new Option("绵阳", "300");
group[25][2] = new Option("自贡", "308");
group[25][3] = new Option("攀枝花", "303");
group[25][4] = new Option("泸州", "298");
group[25][5] = new Option("德阳", "292");
group[25][6] = new Option("广元", "295");
group[25][7] = new Option("遂宁", "304");
group[25][8] = new Option("内江", "301");
group[25][9] = new Option("乐山", "296");
group[25][10] = new Option("南充", "302");
group[25][11] = new Option("宜宾", "306");
group[25][12] = new Option("阿坝", "288");
group[25][13] = new Option("巴中", "289");
group[25][14] = new Option("达州", "291");
group[25][15] = new Option("甘孜", "293");
group[25][16] = new Option("广安", "294");
group[25][17] = new Option("凉山", "297");
group[25][18] = new Option("眉山", "299");
group[25][19] = new Option("雅安", "305");
group[25][20] = new Option("资阳", "307");

group[26][0] = new Option("台北", "314");
group[26][1] = new Option("高雄", "309");
group[26][2] = new Option("台南", "316");
group[26][3] = new Option("台中", "317");
group[26][4] = new Option("花莲", "310");
group[26][5] = new Option("嘉义", "311");
group[26][6] = new Option("南投", "312");
group[26][7] = new Option("屏东", "313");
group[26][8] = new Option("台东", "315");
group[26][9] = new Option("新竹", "318");
group[26][10] = new Option("宜兰", "319");

group[27][0] = new Option("天津", "320");

group[28][0] = new Option("拉萨", "323");
group[28][1] = new Option("昌都", "322");
group[28][2] = new Option("山南", "327");
group[28][3] = new Option("日喀则", "326");
group[28][4] = new Option("那曲", "325");
group[28][5] = new Option("阿里", "321");
group[28][6] = new Option("林芝", "324");

group[29][0] = new Option("香港", "328");

group[30][0] = new Option("乌鲁木齐", "342");
group[30][1] = new Option("克拉玛依", "337");
group[30][2] = new Option("石河子", "339");
group[30][3] = new Option("喀什", "336");
group[30][4] = new Option("和田", "335");
group[30][5] = new Option("吐鲁番", "341");
group[30][6] = new Option("阿克苏", "329");
group[30][7] = new Option("伊犁", "344");
group[30][8] = new Option("哈密", "334");
group[30][9] = new Option("塔城", "374");
group[30][10] = new Option("阿勒泰", "373");
group[30][11] = new Option("阿拉尔", "330");
group[30][12] = new Option("巴音郭楞", "331");
group[30][13] = new Option("博尔塔拉", "332");
group[30][14] = new Option("昌吉", "333");
group[30][15] = new Option("克孜勒苏柯尔克孜", "338");
group[30][16] = new Option("图木舒克", "340");
group[30][17] = new Option("五家渠", "343");

group[31][0] = new Option("昆明", "351");
group[31][1] = new Option("玉溪", "359");
group[31][2] = new Option("曲靖", "355");
group[31][3] = new Option("保山", "345");
group[31][4] = new Option("大理", "347");
group[31][5] = new Option("楚雄", "346");
group[31][6] = new Option("德宏", "348");
group[31][7] = new Option("迪庆", "349");
group[31][8] = new Option("红河", "350");
group[31][9] = new Option("丽江", "352");
group[31][10] = new Option("临沧", "353");
group[31][11] = new Option("怒江", "354");
group[31][12] = new Option("思茅", "356");
group[31][13] = new Option("文山", "357");
group[31][14] = new Option("西双版纳", "358");
group[31][15] = new Option("昭通", "360");
group[31][16] = new Option("普洱", "375");

group[32][0] = new Option("杭州", "361");
group[32][1] = new Option("温州", "370");
group[32][2] = new Option("湖州", "362");
group[32][3] = new Option("嘉兴", "363");
group[32][4] = new Option("宁波", "366");
group[32][5] = new Option("绍兴", "368");
group[32][6] = new Option("金华", "364");
group[32][7] = new Option("台州", "369");
group[32][8] = new Option("丽水", "365");
group[32][9] = new Option("舟山", "371");
group[32][10] = new Option("衢州", "367");

group[33][0] = new Option("重庆", "372");

function CityList(province, objName) {
    var obj = document.getElementById(objName);
    obj.options.length = 0;

    obj.disabled = false;

    obj.options[0] = new Option("城市", "");

    if (group[province.value - 1]) {
        for (i = 0; i < group[province.value - 1].length; i++) {
            obj.options[i + 1] = new Option(group[province.value - 1][i].text, group[province.value - 1][i].value)
        }
    }

}

前台页面调用
<select name="province" class="put_input" id="province" onchange="CityList(this, 'city')"
                                title="省份">
                                <option value="">省份</option>
                                <option value="1">安徽</option>
                                <option value="2">澳门</option>
                                <option value="3">北京</option>
                                <option value="4">福建</option>
                                <option value="5">甘肃</option>
                                <option value="6">广东</option>
                                <option value="7">广西</option>
                                <option value="8">贵州</option>
                                <option value="9">海南</option>
                                <option value="10">河北</option>
                                <option value="11">河南</option>
                                <option value="12">黑龙江</option>
                                <option value="13">湖北</option>
                                <option value="14">湖南</option>
                                <option value="15">吉林</option>
                                <option value="16">江苏</option>
                                <option value="17">江西</option>
                                <option value="18">辽宁</option>
                                <option value="19">内蒙古</option>
                                <option value="20">宁夏</option>
                                <option value="21">青海</option>
                                <option value="22">山东</option>
                                <option value="23">山西</option>
                                <option value="24">陕西</option>
                                <option value="25">上海</option>
                                <option value="26">四川</option>
                                <option value="27">台湾</option>
                                <option value="28">天津</option>
                                <option value="29">西藏</option>
                                <option value="30">香港</option>
                                <option value="31">新疆</option>
                                <option value="32">云南</option>
                                <option value="33">浙江</option>
                                <option value="34">重庆</option>
                            </select>
                             <select name="city" class="put_input" id="city">
                                <option value="">城市</option>
                            </select>