首先写一个js文件，areaLocation.js:
var
provinceArray=
new
Array()
provinceArray=[
{"pname":"江苏",
"country":[
{
"cname":"南京市",
"town":["玄武区","白下区","秦淮区","建邺区","雨花台","江宁区",
"六合区","溧水县","高淳县"]},
{
"cname":"南通市",
"town":["崇川区","港闸区","启东市","如皋市","通州市","海门市","海安县","如东县"]
},
{
"cname":"苏州市",
"town":["金阊区","沧浪区","平江区","虎丘区","吴中区","张家港","昆山市","吴江市","太仓市"]
}
]
},
{"pname":"上海",
"country":[
{
"cname":"上海市",
"town":["徐汇区","普陀区","杨浦区","虹口区","卢湾区","浦东区","黄浦区","长宁区","闸北区","静安区","闵行区","松江区"]
}
]
}
]
function
areaInitialize(){
province.length=1
for(var
i
=
0i<provinceArray.lengthi++){
var
pro
=
provinceArray[i].pname
province.options[province.length]
=
new
Option(pro,pro)
}
}
function
changeCLocation(id,city){
//alert(id)
city.length
=
0
if(id>0){
var
j=id-1
var
i
var
countrys
=
new
Array()
countrys
=
provinceArray[j].country
city.options[0]
=
new
Option('不限','')
for
(i=0i
<
countrys.length
i++){
var
cname
=
countrys[i].cname
city.options[city.length]
=
new
Option(cname,
cname)
}
changeTLocation(id,1,town)
}else
if(id==0){
city.length
=
0
town.length
=
0
city.options[city.length]
=
new
Option('不限','')
town.options[town.length]
=
new
Option('不限','')
}
}
function
changeTLocation(pid,cid,town){
//alert(cid)
var
countrys
=
new
Array()
var
towns
=
new
Array()
town.length
=
0
var
i
countrys
=
provinceArray[pid-1].country
areaId
=
countrys[cid-1].areaId
towns
=
countrys[cid-1].town
city.options[0]
=
new
Option('不限','')
town.options[0]
=
new
Option('不限','')
for
(i=0i
<
towns.length
i++){
var
tname
=
towns[i]
town.options[town.length]
=
new
Option(tname,tname)
}
town.options[0]
=
new
Option('不限','')
}
2.
再写一个html页面：
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN">
<html>
<head>
<script
type="text/javascript"
></script>
<script
type="text/javascript">
window.onload=areaInitialize()
</script>
</head>
<body>
<select
size="1">
<option
value=0
selected>--请选择--</option>
</select>
<select
size="1"
>
<option
value=0
selected>--请选择--</option>
</select>
<select
size=1>
<option
value=0
selected>--请选择--</option>
</select>
</body>
</html>
put id="demo1" type="text" readonly="" name="input_area" placeholder="城市选择特效"/>将样式文件引入到页面中：
<link rel="stylesheet" href="css/common/lArea.css">
同时引入js文件到页面中：
<script src="lArea.js"></script>
初始化插件：
var area = new lArea()
area.init({
'trigger': '#demo1',//控件I
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%><%
String path = request.getContextPath()
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<head>
<title>省市县关联菜单</title>
<meta http-equiv="Content-Type" content="text/HTMLcharset=gb2312">
<style>
body,select
{
font-size:9pt
font-family:Verdana
}
a
{
color:red
text-decoration:none
}
a:hover{
text-decoration:underline
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Dsy()
{
this.Items = {}
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == "undefined") return false
return true
}
function change(v){
var str="0"
for(i=0i<vi++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1))}
var ss=document.getElementById(s[v])
with(ss){
length = 0
options[0]=new Option(opt0[v],opt0[v])
if(v &&document.getElementById(s[v-1]).selectedIndex>0 || !v)
{
if(dsy.Exists(str)){
ar = dsy.Items[str]
for(i=0i<ar.lengthi++)options[length]=new Option(ar[i],ar[i])
if(v)options[1].selected = true
}
}
if(++v<s.length){change(v)}
}
}
var dsy = new Dsy()
dsy.add("0",["安徽","北京","福建","甘肃","广东","广西","贵州","海南","河北","河南","黑龙江","湖北","湖南","吉林","江苏","江西","辽宁","内蒙古","宁夏","青海","山东","山西","陕西","上海","四川","天津","西藏","新疆","云南","浙江","重庆"])
dsy.add("0_0",["安庆","蚌埠","巢湖","池州","滁州","阜阳","合肥","淮北","淮南","黄山","六安","马鞍山","宿州","铜陵","芜湖","宣城","亳州"])
dsy.add("0_1",["北京"])
dsy.add("0_2",["福州","龙岩","南平","宁德","莆田","泉州","三明","厦门","漳州"])
dsy.add("0_3",["白银","定西","甘南藏族自治州","嘉峪关","金昌","酒泉","兰州","临夏回族自治州","陇南","平凉","庆阳","天水","武威","张掖"])
dsy.add("0_4",["潮州","东莞","佛山","广州","河源","惠州","江门","揭阳","茂名","梅州","清远","汕头","汕尾","韶关","深圳","阳江","云浮","湛江","肇庆","中山","珠海"])
dsy.add("0_5",["百色","北海","崇左","防城港","桂林","贵港","河池","贺州","来宾","柳州","南宁","钦州","梧州","玉林"])
dsy.add("0_6",["安顺","毕节","贵阳","六盘水","黔东南苗族侗族自治州","黔南布依族苗族自治州","黔西南布依族苗族自治州","铜仁","遵义"])
dsy.add("0_7",["白沙黎族自治县","保亭黎族苗族自治县","昌江黎族自治县","澄迈县","定安县","东方","海口","乐东黎族自治县","临高县","陵水黎族自治县","琼海","琼中黎族苗族自治县","三亚","屯昌县","万宁","文昌","五指山","儋州"])
dsy.add("0_8",["保定","沧州","承德","邯郸","衡水","廊坊","秦皇岛","石家庄","唐山","邢台","张家口"])
dsy.add("0_9",["安阳","鹤壁","济源","焦作","开封","洛阳","南阳","平顶山","三门峡","商丘","新乡","信阳","许昌","郑州","周口","驻马店","漯河","濮阳"])
dsy.add("0_10",["大庆","大兴安岭","哈尔滨","鹤岗","黑河","鸡西","佳木斯","牡丹江","七台河","齐齐哈尔","双鸭山","绥化","伊春"])
dsy.add("0_11",["鄂州","恩施土家族苗族自治州","黄冈","黄石","荆门","荆州","潜江","神农架林区","十堰","随州","天门","武汉","仙桃","咸宁","襄樊","孝感","宜昌"])
dsy.add("0_12",["常德","长沙","郴州","衡阳","怀化","娄底","邵阳","湘潭","湘西土家族苗族自治州","益阳","永州","岳阳","张家界","株洲"])
dsy.add("0_13",["白城","白山","长春","吉林","辽源","四平","松原","通化","延边朝鲜族自治州"])
dsy.add("0_14",["常州","淮安","连云港","南京","南通","苏州","宿迁","泰州","无锡","徐州","盐城","扬州","镇江"])
dsy.add("0_15",["抚州","赣州","吉安","景德镇","九江","南昌","萍乡","上饶","新余","宜春","鹰潭"])
dsy.add("0_16",["鞍山","本溪","朝阳","大连","丹东","抚顺","阜新","葫芦岛","锦州","辽阳","盘锦","沈阳","铁岭","营口"])
dsy.add("0_17",["阿拉善盟","巴彦淖尔盟","包头","赤峰","鄂尔多斯","呼和浩特","呼伦贝尔","通辽","乌海","乌兰察布盟","锡林郭勒盟","兴安盟"])
dsy.add("0_18",["固原","石嘴山","吴忠","银川"])
dsy.add("0_19",["果洛藏族自治州","海北藏族自治州","海东","海南藏族自治州","海西蒙古族藏族自治州","黄南藏族自治州","西宁","玉树藏族自治州"])
dsy.add("0_20",["滨州","德州","东营","菏泽","济南","济宁","莱芜","聊城","临沂","青岛","日照","泰安","威海","潍坊","烟台","枣庄","淄博"])
dsy.add("0_21",["长治","大同","晋城","晋中","临汾","吕梁","朔州","太原","忻州","阳泉","运城"])
dsy.add("0_22",["安康","宝鸡","汉中","商洛","铜川","渭南","西安","咸阳","延安","榆林"])
dsy.add("0_23",["上海"])
dsy.add("0_24",["阿坝藏族羌族自治州","巴中","成都","达州","德阳","甘孜藏族自治州","广安","广元","乐山","凉山彝族自治州","眉山","绵阳","南充","内江","攀枝花","遂宁","雅安","宜宾","资阳","自贡","泸州"])
dsy.add("0_25",["天津"])
dsy.add("0_26",["阿里","昌都","拉萨","林芝","那曲","日喀则","山南"])
dsy.add("0_27",["阿克苏","阿拉尔","巴音郭楞蒙古自治州","博尔塔拉蒙古自治州","昌吉回族自治州","哈密","和田","喀什","克拉玛依","克孜勒苏柯尔克孜自治州","石河子","图木舒克","吐鲁番","乌鲁木齐","五家渠","伊犁哈萨克自治州"])
dsy.add("0_28",["保山","楚雄彝族自治州","大理白族自治州","德宏傣族景颇族自治州","迪庆藏族自治州","红河哈尼族彝族自治州","昆明","丽江","临沧","怒江僳僳族自治州","曲靖","思茅","文山壮族苗族自治州","西双版纳傣族自治州","玉溪","昭通"])
dsy.add("0_29",["杭州","湖州","嘉兴","金华","丽水","宁波","绍兴","台州","温州","舟山","衢州"])
dsy.add("0_30",["重庆"])
//-->
</SCRIPT>
<SCRIPT LANGUAGE = JavaScript>
<!--
//** Power by Fason(2004-3-11)
//** Email:fason_pfx@hotmail.com
var s=["s1","s2"]
var opt0 = ["省份","地级市"]
function setup()
{
for(i=0i<s.length-1i++)
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")")
change(0)
}
//-->
</SCRIPT>
</head>
<body bgcolor="#E0E0E0" onload="setup()">
多级关联菜单：
<form name="frm">
<select id="s1"><option>省份</option></select>
<select id="s2"><option>地级市</option></select>
</form>
</body>
</HTML>
这个我测过了，可以实现
