下拉列表的二级联动（省、市）

来源：互联网发布：asp网站数据库在哪里编辑：程序博客网时间：2024/04/30 02:54

javascriptfunctiontableclass

下拉列表的二级联动（省、市）

[xhtml] view plaincopy
<table id="selectTest" >  
    <tr>  
          <td align="center" class="bg">所在地</td>  
          <td width="90%" align="center"><select id="J_province" style="width:130px;" onchange=setcity(); name="model.state">  
              <option value="">----请选择省份----</option>  
              <option value="安徽">安徽</option>  
              <option value="北京">北京</option>  
              <option value="重庆">重庆</option>  
              <option value="福建">福建</option>  
              <option value="甘肃">甘肃</option>  
              <option value="广东">广东</option>  
              <option value="广西">广西</option>  
              <option value="贵州">贵州</option>  
              <option value="海南">海南</option>  
              <option value="河北">河北</option>  
              <option value="黑龙江">黑龙江</option>  
              <option value="河南">河南</option>  
              <option value="湖北">湖北</option>  
              <option value="湖南">湖南</option>  
              <option value="江苏">江苏</option>  
              <option value="江西">江西</option>  
              <option value="吉林">吉林</option>  
              <option value="辽宁">辽宁</option>  
              <option value="内蒙古">内蒙古</option>  
              <option value="宁夏">宁夏</option>  
              <option value="青海">青海</option>  
              <option value="山东">山东</option>  
              <option value="上海">上海</option>  
              <option value="山西">山西</option>  
              <option value="陕西">陕西</option>  
              <option value="四川">四川</option>  
              <option value="天津">天津</option>  
              <option value="新疆">新疆</option>  
              <option value="西藏">西藏</option>  
              <option value="云南">云南</option>  
              <option value="浙江">浙江</option>  
              <option value="香港">香港</option>  
              <option value="澳门">澳门</option>  
              <option value="台湾">台湾</option>  
              <option value="海外">海外</option>  
            </select>  
            城市：  
            <select id="J_city" style="width:90px;" name="model.city">  
            </select>  
            <SCRIPT language=JavaScript>  
<!--  
function setcity() {  
    switch (document.mainform["model.state"].value) { //这里的mainform是form 的name=mainform  
        case "安徽" :  
            var cityOptions = new Array(  
            "合肥(*)", "合肥",  
            "安庆", "安庆",  
            "蚌埠", "蚌埠",  
            "亳州", "亳州",  
            "巢湖", "巢湖",  
            "滁州", "滁州",  
            "阜阳", "阜阳",  
            "贵池", "贵池",  
            "淮北", "淮北",  
            "淮化", "淮化",  
            "淮南", "淮南",  
            "黄山", "黄山",  
            "九华山", "九华山",  
            "六安", "六安",  
            "马鞍山", "马鞍山",  
            "宿州", "宿州",  
            "铜陵", "铜陵",  
            "屯溪", "屯溪",  
            "芜湖", "芜湖",  
            "宣城", "宣城");  
             break;  
        case "北京" :  
            var cityOptions = new Array(   
            "北京", "北京");  
            break;  
        case "重庆" :  
            var cityOptions = new Array(   
            "重庆", "重庆");  
            break;  
        case "福建" :  
            var cityOptions = new Array(   
            "福州(*)", "福州",  
            "福安", "福安",  
            "龙岩", "龙岩",  
            "南平", "南平",  
            "宁德", "宁德",  
            "莆田", "莆田",  
            "泉州", "泉州",  
            "三明", "三明",  
            "邵武", "邵武",  
            "石狮", "石狮",  
            "永安", "永安",  
            "武夷山", "武夷山",  
            "厦门", "厦门",  
            "漳州", "漳州");  
             break;  
        case "甘肃" :  
            var cityOptions = new Array(   
            "兰州(*)", "兰州",  
            "白银", "白银",  
            "定西", "定西",  
            "敦煌", "敦煌",  
            "甘南", "甘南",  
            "金昌", "金昌",  
            "酒泉", "酒泉",  
            "临夏", "临夏",  
            "平凉", "平凉",  
            "天水", "天水",  
            "武都", "武都",   
            "武威", "武威",   
            "西峰", "西峰",   
            "张掖", "张掖");  
            break;  
        case "广东" :  
            var cityOptions = new Array(   
            "广州(*)", "广州",  
            "潮阳", "潮阳",  
            "潮州", "潮州",  
            "澄海", "澄海",  
            "东莞", "东莞",  
            "佛山", "佛山",  
            "河源", "河源",  
            "惠州", "惠州",  
            "江门", "江门",  
            "揭阳", "揭阳",  
            "开平", "开平",  
            "茂名", "茂名",  
            "梅州", "梅州",  
            "清远", "清远",  
            "汕头", "汕头",  
            "汕尾", "汕尾",  
            "韶关", "韶关",  
            "深圳", "深圳",  
            "顺德", "顺德",  
            "阳江", "阳江",              
            "英德", "英德",  
            "云浮", "云浮",  
            "增城", "增城",  
            "湛江", "湛江",  
            "肇庆", "肇庆",   
            "中山", "中山",   
            "珠海", "珠海");  
            break;  
        case "广西" :  
            var cityOptions = new Array(   
            "南宁(*)", "南宁",  
            "百色", "百色",  
            "北海", "北海",  
            "桂林", "桂林",  
            "防城港", "防城港",  
            "河池", "河池",  
            "贺州", "贺州",  
            "柳州", "柳州",  
            "钦州", "钦州",   
            "梧州", "梧州",   
            "玉林", "玉林");  
            break;  
        case "贵州" :  
            var cityOptions = new Array(   
            "贵阳(*)", "贵阳",  
            "安顺", "安顺",  
            "毕节", "毕节",  
            "都匀", "都匀",  
            "凯里", "凯里",  
            "六盘水", "六盘水",  
            "铜仁", "铜仁",  
            "兴义", "兴义",   
            "玉屏", "玉屏",   
            "遵义", "遵义");  
            break;  
        case "海南" :  
            var cityOptions = new Array(   
            "海口(*)", "海口",  
            "儋县", "儋县",  
            "陵水", "陵水",  
            "琼海", "琼海",  
            "三亚", "三亚",   
            "五指山", "五指山",   
            "万宁", "万宁");  
            break;  
        case "河北" :  
            var cityOptions = new Array(   
            "石家庄(*)", "石家庄",  
            "保定", "保定",  
            "北戴河", "北戴河",  
            "沧州", "沧州",  
            "承德", "承德",  
            "丰润", "丰润",  
            "邯郸", "邯郸",  
            "衡水", "衡水",  
            "廊坊", "廊坊",  
            "南戴河", "南戴河",  
            "秦皇岛", "秦皇岛",  
            "唐山", "唐山",  
            "新城", "新城",  
            "邢台", "邢台",   
            "张家口", "张家口");  
            break;  
        case "黑龙江" :  
            var cityOptions = new Array(   
            "哈尔滨(*)", "哈尔滨",  
            "北安", "北安",  
            "大庆", "大庆",  
            "大兴安岭", "大兴安岭",  
            "鹤岗", "鹤岗",  
            "黑河", "黑河",  
            "佳木斯", "佳木斯",  
            "鸡西", "鸡西",  
            "牡丹江", "牡丹江",  
            "齐齐哈尔", "齐齐哈尔",  
            "七台河", "七台河",  
            "双鸭山", "双鸭山",  
            "绥化", "绥化",  
            "伊春", "伊春");  
            break;  
        case "河南" :  
            var cityOptions = new Array(   
            "郑州(*)", "郑州",  
            "安阳", "安阳",  
            "鹤壁", "鹤壁",  
            "潢川", "潢川",  
            "焦作", "焦作",  
            "济源", "济源",  
            "开封", "开封",  
            "漯河", "漯河",  
            "洛阳", "洛阳",  
            "南阳", "南阳",  
            "平顶山", "平顶山",  
            "濮阳", "濮阳",  
            "三门峡", "三门峡",  
            "商丘", "商丘",  
            "新乡", "新乡",  
            "信阳", "信阳",  
            "许昌", "许昌",  
            "周口", "周口",   
            "驻马店", "驻马店");  
            break;  
        case "湖北" :   
            var cityOptions = new Array(   
            "武汉(*)", "武汉",  
            "恩施", "恩施",  
            "鄂州", "鄂州",  
            "黄冈", "黄冈",  
            "黄石", "黄石",  
            "荆门", "荆门",  
            "荆州", "荆州",  
            "潜江", "潜江",  
            "十堰", "十堰",  
            "随州", "随州",  
            "武穴", "武穴",  
            "仙桃", "仙桃",  
            "咸宁", "咸宁",  
            "襄阳", "襄阳",  
            "襄樊", "襄樊",  
            "孝感", "孝感",  
            "宜昌", "宜昌");  
            break;  
        case "湖南" :  
            var cityOptions = new Array(   
            "长沙(*)", "长沙",  
            "常德", "常德",  
            "郴州", "郴州",  
            "衡阳", "衡阳",  
            "怀化", "怀化",  
            "吉首", "吉首",  
            "娄底", "娄底",  
            "邵阳", "邵阳",  
            "湘潭", "湘潭",  
            "益阳", "益阳",  
            "岳阳", "岳阳",  
            "永州", "永州",  
            "张家界", "张家界",  
            "株洲", "株洲");  
            break;  
        case "江苏" :  
            var cityOptions = new Array(   
            "南京(*)", "南京",  
            "常熟", "常熟",  
            "常州", "常州",  
            "海门", "海门",  
            "淮安", "淮安",  
            "江都", "江都",  
            "江阴", "江阴",  
            "昆山", "昆山",  
            "连云港", "连云港",  
            "南通", "南通",  
            "启东", "启东",  
            "沭阳", "沭阳",  
            "宿迁", "宿迁",              
            "苏州", "苏州",  
            "太仓", "太仓",  
            "泰州", "泰州",  
            "同里", "同里",  
            "无锡", "无锡",  
            "徐州", "徐州",  
            "盐城", "盐城",  
            "扬州", "扬州",  
            "宜兴", "宜兴",  
            "仪征", "仪征",  
            "张家港", "张家港",   
            "镇江", "镇江",   
            "周庄", "周庄");  
            break;  
        case "江西" :  
            var cityOptions = new Array(   
            "南昌(*)", "南昌",  
            "抚州", "抚州",  
            "赣州", "赣州",  
            "吉安", "吉安",  
            "景德镇", "景德镇",  
            "井冈山", "井冈山",  
            "九江", "九江",  
            "庐山", "庐山",  
            "萍乡", "萍乡",  
            "上饶", "上饶",  
            "新余", "新余",   
            "宜春", "宜春",   
            "鹰潭", "鹰潭");  
            break;  
        case "吉林" :  
            var cityOptions = new Array(   
            "长春(*)", "长春",  
            "白城", "白城",  
            "白山", "白山",  
            "珲春", "珲春",  
            "辽源", "辽源",  
            "梅河", "梅河",  
            "吉林", "吉林",  
            "四平", "四平",  
            "松原", "松原",  
            "通化", "通化",  
            "延吉", "延吉");  
            break;  
        case "辽宁" :  
            var cityOptions = new Array(   
            "沈阳(*)", "沈阳",  
            "鞍山", "鞍山",  
            "本溪", "本溪",  
            "朝阳", "朝阳",  
            "大连", "大连",  
            "丹东", "丹东",  
            "抚顺", "抚顺",  
            "阜新", "阜新",  
            "葫芦岛", "葫芦岛",  
            "锦州", "锦州",  
            "辽阳", "辽阳",  
            "盘锦", "盘锦",  
            "铁岭", "铁岭",  
            "营口", "营口");  
            break;  
        case "内蒙古" :  
            var cityOptions = new Array(   
            "呼和浩特(*)", "呼和浩特",  
            "阿拉善盟", "阿拉善盟",  
            "包头", "包头",  
            "赤峰", "赤峰",  
            "东胜", "东胜",  
            "海拉尔", "海拉尔",  
            "集宁", "集宁",  
            "临河", "临河",  
            "通辽", "通辽",  
            "乌海", "乌海",  
            "乌兰浩特", "乌兰浩特",   
            "锡林浩特", "锡林浩特");  
            break;  
        case "宁夏" :  
            var cityOptions = new Array(   
            "银川(*)", "银川",  
            "固原", "固原",   
            "石嘴山", "石嘴山",   
            "吴忠", "吴忠");  
            break;  
        case "青海" :  
            var cityOptions = new Array(   
            "西宁(*)", "西宁",  
            "德令哈", "德令哈",  
            "格尔木", "格尔木",  
            "共和", "共和",  
            "海东", "海东",  
            "海晏", "海晏",  
            "玛沁", "玛沁",  
            "同仁", "同仁",   
            "玉树", "玉树");  
            break;  
        case "山东" :  
            var cityOptions = new Array(   
            "济南(*)", "济南",  
            "滨州", "滨州",  
            "兖州", "兖州",  
            "德州", "德州",  
            "东营", "东营",  
            "菏泽", "菏泽",  
            "济宁", "济宁",  
            "莱芜", "莱芜",  
            "聊城", "聊城",  
            "临沂", "临沂",  
            "蓬莱", "蓬莱",  
            "青岛", "青岛",  
            "曲阜", "曲阜",  
            "日照", "日照",  
            "泰安", "泰安",  
            "潍坊", "潍坊",  
            "威海", "威海",  
            "烟台", "烟台",  
            "枣庄", "枣庄",  
            "淄博", "淄博");  
            break;  
        case "上海" :  
            var cityOptions = new Array(   
            "上海", "上海",   
            "崇明", "崇明",   
            "朱家角", "朱家角");  
            break;  
        case "山西" :  
            var cityOptions = new Array(   
            "太原(*)", "太原",  
            "长治", "长治",  
            "大同", "大同",  
            "候马", "候马",  
            "晋城", "晋城",  
            "离石", "离石",  
            "临汾", "临汾",  
            "宁武", "宁武",  
            "朔州", "朔州",  
            "忻州", "忻州",  
            "阳泉", "阳泉",   
            "榆次", "榆次",   
            "运城", "运城");  
            break;  
        case "陕西" :  
            var cityOptions = new Array(   
            "西安(*)", "西安",  
            "安康", "安康",  
            "宝鸡", "宝鸡",  
            "汉中", "汉中",  
            "渭南", "渭南",  
            "商州", "商州",  
            "绥德", "绥德",  
            "铜川", "铜川",  
            "咸阳", "咸阳",  
            "延安", "延安",  
            "榆林", "榆林");  
            break;  
        case "四川" :  
            var cityOptions = new Array(   
            "成都(*)", "成都",  
            "巴中", "巴中",  
            "达州", "达州",  
            "德阳", "德阳",  
            "都江堰", "都江堰",  
            "峨眉山", "峨眉山",  
            "广安", "广安",  
            "广元", "广元",  
            "九寨沟", "九寨沟",  
            "康定", "康定",  
            "乐山", "乐山",  
            "泸州", "泸州",  
            "马尔康", "马尔康",  
            "绵阳", "绵阳",  
            "眉山", "眉山",  
            "南充", "南充",  
            "内江", "内江",  
            "攀枝花", "攀枝花",  
            "遂宁", "遂宁",  
            "汶川", "汶川",  
            "西昌", "西昌",  
            "雅安", "雅安",  
            "宜宾", "宜宾",   
            "自贡", "自贡",  
            "资阳", "资阳");  
            break;  
        case "天津" :  
            var cityOptions = new Array(   
            "天津", "天津");  
            break;  
        case "新疆" :  
            var cityOptions = new Array(   
            "乌鲁木齐(*)", "乌鲁木齐",  
            "阿克苏", "阿克苏",  
            "阿勒泰", "阿勒泰",  
            "阿图什", "阿图什",  
            "博乐", "博乐",  
            "昌吉", "昌吉",  
            "东山", "东山",  
            "哈密", "哈密",  
            "和田", "和田",  
            "喀什", "喀什",  
            "克拉玛依", "克拉玛依",  
            "库车", "库车",  
            "库尔勒", "库尔勒",  
            "奎屯", "奎屯",  
            "石河子", "石河子",  
            "塔城", "塔城",  
            "吐鲁番", "吐鲁番",   
            "伊宁", "伊宁");  
            break;  
        case "西藏" :  
            var cityOptions = new Array(   
            "拉萨(*)", "拉萨",  
            "阿里", "阿里",  
            "昌都", "昌都",  
            "林芝", "林芝",  
            "那曲", "那曲",   
            "日喀则", "日喀则",   
            "山南", "山南");  
            break;  
        case "云南" :  
            var cityOptions = new Array(   
            "昆明(*)", "昆明",  
            "大理", "大理",  
            "保山", "保山",  
            "楚雄", "楚雄",  
            "东川", "东川",  
            "个旧", "个旧",  
            "景洪", "景洪",  
            "开远", "开远",  
            "临沧", "临沧",  
            "丽江", "丽江",  
            "六库", "六库",  
            "潞西", "潞西",  
            "曲靖", "曲靖",  
            "思茅", "思茅",  
            "文山", "文山",  
            "西双版纳", "西双版纳",  
            "玉溪", "玉溪",   
            "中甸", "中甸",   
            "昭通", "昭通");  
            break;  
        case "浙江" :  
            var cityOptions = new Array(   
            "杭州(*)", "杭州",  
            "安吉", "安吉",  
            "慈溪", "慈溪",  
            "定海", "定海",  
            "奉化", "奉化",  
            "海盐", "海盐",  
            "黄岩", "黄岩",  
            "湖州", "湖州",  
            "嘉兴", "嘉兴",  
            "金华", "金华",  
            "临安", "临安",  
            "临海", "临海",  
            "丽水", "丽水",  
            "宁波", "宁波",  
            "瓯海", "瓯海",  
            "平湖", "平湖",  
            "千岛湖", "千岛湖",  
            "衢州", "衢州",  
            "江山", "江山",  
            "瑞安", "瑞安",  
            "绍兴", "绍兴",  
            "嵊州", "嵊州",  
            "台州", "台州",  
            "温岭", "温岭",  
            "温州", "温州",  
            "舟山", "舟山");  
            break;  
        case "香港" :  
            var cityOptions = new Array(   
            "香港", "香港",   
            "九龙", "九龙",  
            "新界", "新界");  
            break;  
        case "澳门" :  
            var cityOptions = new Array(   
            "澳门", "澳门");  
            break;  
        case "台湾" :  
            var cityOptions = new Array(   
            "台北(*)", "台北",  
            "基隆", "基隆",   
            "台南", "台南",   
            "台中", "台中",  
            "新竹", "新竹",  
            "嘉义", "嘉义",  
            "高雄", "高雄",  
            "金门县","金门县",  
            "南投县","南投县",  
            "台北县","台北县",  
            "宜兰县","宜兰县",  
            "新竹县","新竹县",  
            "桃园县","桃园县",  
            "苗栗县","苗栗县",  
            "台中县","台中县",  
            "彰化县","彰化县",  
            "嘉义县","嘉义县",  
            "云林县","云林县",  
            "台南县","台南县",  
            "高雄县","高雄县",  
            "屏东县","屏东县",  
            "台东县","台东县",  
            "花莲县","花莲县",  
            "澎湖县","澎湖县",  
            "其它", "其它");  
            break;  
        case "海外" :  
            var cityOptions = new Array(   
            "美国(*)", "美国",  
            "英国", "英国",   
            "法国", "法国",   
            "瑞士", "瑞士",   
            "澳洲", "澳洲",   
            "新西兰", "新西兰",   
            "加拿大", "加拿大",   
            "奥地利", "奥地利",   
            "韩国", "韩国",   
            "日本", "日本",   
            "德国", "德国",   
                        "意大利", "意大利",   
                        "西班牙", "西班牙",   
                        "俄罗斯", "俄罗斯",   
                        "泰国", "泰国",   
                        "印度", "印度",   
                        "荷兰", "荷兰",   
                        "新加坡", "新加坡",  
            "其它国家", "其它国家");  
            break;                
        default:  
            var cityOptions = new Array("", "");  
            break;  
    }  
      
    document.mainform["model.city"].options.length = 0;      
    for(var i = 0; i < cityOptions.length/2; i++) {  
        document.mainform["model.city"].options[i]=new Option(cityOptions[i*2],cityOptions[i*2+1]);  
  
        if (document.mainform["model.city"].options[i].value=="" )   
        {  
            //alert("here put City ok!");  
            document.mainform["model.city"].selectedIndex = i;  
        }  
    }  
    if(true){ //commented out by zhenbei on 2007-04-13  
          
        return;  
    }  
  
}  
  
function initprovcity() {  //这个再这里没什么用  
    var provObject = document.mainform["model.state"];  
    for(var i = 0; i < document.mainform["model.state"].options.length; i++) {  
        if (document.mainform["model.state"].options[i].value=="")  
        {  
            //alert("prov put is ok");  
            document.mainform["model.state"].selectedIndex = i;  
        }  
    }  
    setcity();  
}  
initprovcity();  
// onload=initprovcity;  
-->  
</SCRIPT>          </td>  
        </tr>  
</table>    