JSP+JavaScript 二级联动 静态
在一个jsp页面实现二级下拉框联动，实时读取数据库数据。
这个帖子介绍的是使用静态方法在JavaScript中实现二级联动，过几天更新一下动态二级联动
声明：代码中使用的省市数据取自网上的一个帖子，实现部分是自己写的
<span style="background-color: rgb(153, 255, 153);"><span style="color:#993300;"><span style="font-family:Verdana;"><!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>二级联动</title>
</head>
<script type="text/javascript">
var where = new Array();
where["请选择省份名"]= new Array("请选择城市名");
where["北京"] = new Array("东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆");
where["上海"] = new Array("黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","崇明");
where["天津"] = new Array("和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县");
where["重庆"] = new Array("万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁");
where["河北"] = new Array("石家庄","邯郸","邢台","保定","张家口","承德","廊坊","唐山","秦皇岛","沧州","衡水");
where["山西"] = new Array("太原","大同","阳泉","长治","晋城","朔州","吕梁","忻州","晋中","临汾","运城");
where["内蒙古"] = new Array("呼和浩特","包头","乌海","赤峰","呼伦贝尔盟","阿拉善盟","哲里木盟","兴安盟","乌兰察布盟","锡林郭勒盟","巴彦淖尔盟","伊克昭盟");
where["辽宁"] = new Array("沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛");
where["吉林"] = new Array("长春","吉林","四平","辽源","通化","白山","松原","白城","延边");
where["黑龙江"] = new Array("哈尔滨","齐齐哈尔","牡丹江","佳木斯","大庆","绥化","鹤岗","鸡西","黑河","双鸭山","伊春","七台河","大兴安岭");
where["江苏"] = new Array("南京","镇江","苏州","南通","扬州","盐城","徐州","连云港","常州","无锡","宿迁","泰州","淮安");
where["浙江"] = new Array("杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水");
where["安徽"] = new Array("合肥","芜湖","蚌埠","马鞍山","淮北","铜陵","安庆","黄山","滁州","宿州","池州","淮南","巢湖","阜阳","六安","宣城","亳州");
where["福建"] = new Array("福州","厦门","莆田","三明","泉州","漳州","南平","龙岩","宁德");
where["江西"] = new Array("南昌市","景德镇","九江","鹰潭","萍乡","新馀","赣州","吉安","宜春","抚州","上饶");
where["山东"] = new Array("济南","青岛","淄博","枣庄","东营","烟台","潍坊","济宁","泰安","威海","日照","莱芜","临沂","德州","聊城","滨州","菏泽");
where["河南"] = new Array("郑州","开封","洛阳","平顶山","安阳","鹤壁","新乡","焦作","濮阳","许昌","漯河","三门峡","南阳","商丘","信阳","周口","驻马店","济源");
where["湖北"] = new Array("武汉","宜昌","荆州","襄樊","黄石","荆门","黄冈","十堰","恩施","潜江","天门","仙桃","随州","咸宁","孝感","鄂州");
where["湖南"] = new Array("长沙","常德","株洲","湘潭","衡阳","岳阳","邵阳","益阳","娄底","怀化","郴州","永州","湘西","张家界");
where["广东"] = new Array("广州","深圳","珠海","汕头","东莞","中山","佛山","韶关","江门","湛江","茂名","肇庆","惠州","梅州","汕尾","河源","阳江","清远","潮州","揭阳","云浮");
where["广西"] = new Array("南宁","柳州","桂林","梧州","北海","防城港","钦州","贵港","玉林","南宁地区","柳州地区","贺州","百色","河池");
where["海南"] = new Array("海口","三亚");
where["四川"] = new Array("成都","绵阳","德阳","自贡","攀枝花","广元","内江","乐山","南充","宜宾","广安","达川","雅安","眉山","甘孜","凉山","泸州");
where["贵州"] = new Array("贵阳","六盘水","遵义","安顺","铜仁","黔西南","毕节","黔东南","黔南");
where["云南"] = new Array("昆明","大理","曲靖","玉溪","昭通","楚雄","红河","文山","思茅","西双版纳","保山","德宏","丽江","怒江","迪庆","临沧");
where["西藏"] = new Array("拉萨","日喀则","山南","林芝","昌都","阿里","那曲");
where["陕西"] = new Array("西安","宝鸡","咸阳","铜川","渭南","延安","榆林","汉中","安康","商洛");
where["甘肃"] = new Array("兰州","嘉峪关","金昌","白银","天水","酒泉","张掖","武威","定西","陇南","平凉","庆阳","临夏","甘南");
where["宁夏"] = new Array("银川","石嘴山","吴忠","固原");
where["青海"] = new Array("西宁","海东","海南","海北","黄南","玉树","果洛","海西");
where["新疆"] = new Array("乌鲁木齐","石河子","克拉玛依","伊犁","巴音郭勒","昌吉","博尔塔拉","吐鲁番","哈密","喀什","和田","阿克苏");
where["港澳"] = new Array("香港","澳门");
where["台湾"] = new Array("台北","高雄","台中","台南","屏东","南投","云林","新竹","彰化","苗栗","嘉义","花莲","桃园","宜兰","基隆","台东","金门","马祖","澎湖");
where["其它"] = new Array("北美洲","南美洲","亚洲","非洲","欧洲","大洋洲");
function init(){
for(var w in where){
var cp = new Option(w,w);
document.getElementById("city").add(cp,null);
}
var cp = new Option(where["请选择省份名"][0],where["请选择省份名"][0]);
document.getElementById("city2").add(cp,null);
}
function addcity(){
document.getElementById("city2").length=0;
var city = document.getElementById("city").value;
for(var i=0;i<where[city].length;i++){
var cp = new Option(where[city][i],where[city][i]);
document.getElementById("city2").add(cp,null);
}
}
window.onload = init;
</script>
<body>
<select id="city" onchange="addcity()" style="width:110px">
</select>
<select id="city2" style="width:110px">
</select>
</body>
</html></span></span></span>
实现一个静态的二级联动关键点就是：
1.页面加载完成之后要将第一项的选项初始化按成
2.为select标签写一个监听事件，JavaScript实现联动即可