省市两级连动
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>省市两级连动</title>
<script defer>
var ar =
[[["安徽省"],["安庆市","蚌埠市","巢湖市","池州市","滁州市","阜阳市","毫州市","合肥市","淮北市","淮南市","黄山市","六安市","马鞍山市","宿州市","铜陵市","芜湖市","宣州市"]],[["澳门"],["澳门"]],[["北京市"],["北京市"]],[["福建省"],["福州市","龙岩市","南平市","宁德市","莆田市","泉州市","三明市","厦门市","漳州市"]],[["甘肃省"],["白银市","定西地区","甘南自治州","嘉峪关市","金昌市","酒泉地区","兰州市","临夏自治州","陇南地区","平凉地区","庆阳地区","天水市","武威市","张掖地区"]],[["广东省"],["深圳市","潮州市","东莞市","佛山市","广州市","河源市","惠州市","江门市","揭阳市","茂名市","梅州市","清远市","汕头市","汕尾市","韶关市","阳江市","云浮市","湛江市","肇庆市","中山市","珠海市"]],[["广西"],["百色地区","北海市","防城港市","桂林地区","桂林市","贵港市","河池地区","柳州地区","柳州市","南宁市","南宁地区","钦州市","贺州地区","梧州市","玉林市"]],[["贵州省"],["安顺市","毕节地区","贵阳市","六盘水市","黔东南自治州","黔南自治州","黔西南自治州","铜仁市","遵义市"]],[["海南省"],["海口市","三亚市"]],[["河北省"],["保定地区","保定市","沧州地区","沧州市","承德地区","承德市","邯郸市","衡水市","廊坊市","秦皇岛市","深州市","石家庄市","唐山市","邢台地区","邢台市","张家口地区","张家口市"]],[["河南省"],["安阳市","鹤壁市","焦作市","开封市","洛阳市","南阳市","平顶山市","三门峡市","商丘市","新乡市","信阳市","许昌市","郑州市","周口市","驻马店市","漯河市","濮阳市"]],[["黑龙江"],["大庆市","大兴安岭","哈尔滨市","鹤岗市","黑河地区","黑河市","鸡西市","佳木斯市","牡丹江市","七台河市","齐齐哈尔市","双鸭山市","松花江地区","绥化市","伊春市"]],[["湖北省"],["鄂州市","恩施自治州","黄冈市","黄石市","荆门市","荆州市","十堰市","随州市","武汉市","咸宁市","襄樊市","孝感地区","孝感市","宜昌地区","宜昌市","郧阳地区"]],[["湖南省"],["常德市","长沙市","郴州地区","张家界市","衡阳市","怀化市","永州市","娄底市","邵阳市","湘潭市","湘西自治区","益阳市","岳阳市","株洲市"]],[["吉林省"],["白城地区","白城市","白山市","长春市","浑江市","吉林市","辽源市","四平市","松原市","通化市","延边自治区"]],[["江苏省"],["常州市","淮阴市","连云港市","南京市","南通市","苏州市","宿迁市","泰州市","无锡市","徐州市","盐城市","扬州市","镇江市"]],[["江西省"],["抚州市","赣州市","吉安市","景德镇市","九江市","南昌市","萍乡市","上饶市","新余市","宜春市","鹰潭市"]],[["辽宁省"],["鞍山市","本溪市","朝阳市","大连市","丹东市","抚顺市","阜新市","葫芦岛市","锦州市","辽阳市","盘锦市","沈阳市","铁岭市","营口市"]],[["内蒙古"],["阿拉善盟","巴彦淖尔盟","包头市","赤峰市","呼和浩特市","呼伦贝尔市","乌海市","乌兰察布盟","锡林郭勒盟","兴安盟","鄂尔多斯市","通辽市"]],[["宁夏"],["固原市","石嘴山市","银川市","吴忠市"]],[["青海省"],["果洛自治州","海北自治州","海东地区","海南自治州","海西自治州","黄南自治州","西宁市","玉树自治州"]],[["山东省"],["滨州市","德州市","东营市","菏泽地区","济南市","济宁市","莱芜市","聊城市","临沂市","青岛市","日照市","泰安市","威海市","潍坊市","烟台市","枣庄市","淄博市"]],[["山西省"],["长治市","大同市","晋城市","晋中市","临汾市","吕梁地区","朔州市","太原市","忻州市","雁北地区","阳泉市","运城市"]],[["陕西省"],["安康市","宝鸡市","汉中市","商洛市","铜川市","渭南市","西安市","咸阳市","延安市","榆林市"]],[["上海市"],["上海市"]],[["四川省"],["阿坝自治州","巴中市","成都市","达州市","德阳市","甘孜自治州","广安市","广元市","乐山市","凉山自治州","眉山市","绵阳市","南充市","内江市","攀枝花市","遂宁市","雅安市","宜宾市","自贡市","泸州市","资阳市"]],[["台湾"],["高雄市","高雄县","花莲县","基隆市","嘉义市","嘉义县","苗栗县","南投县","澎湖县","屏东县","台北市","台北县","台东县","台南市","台南县","台中市","台中县","桃园县","新竹市","新竹县","宜兰县","云林县","彰化市","彰化县"]],[["天津市"],["天津市"]],[["西藏"],["阿里地区","昌都地区","拉萨市","林芝地区","那曲地区","日喀则地区","山南地区"]],[["香港"],["香港"]],[["新疆"],["阿克苏地区","阿勒泰地区","巴音郭楞州","博尔塔拉州","昌吉自治州","哈密地区","和田地区","喀什地区","克拉玛依市","克孜勒州","石河子市","塔城地区","吐鲁番地区","乌鲁木齐市","伊犁地区"]],[["云南省"],["保山市","楚雄自治州","大理自治州","德宏自治州","迪庆自治州","东川市","红河自治州","昆明市","丽江地区","临沧地区","怒江自治州","曲靖市","思茅地区","文山自治州","西双版纳州","玉溪市","昭通市"]],[["浙江省"],["杭州市","湖州市","嘉兴市","金华市","丽水市","宁波市","绍兴市","台州市","温州市","舟山市","衢州市"]],[["重庆市"],["重庆市"]]];
for (var i=0;i<ar.length;i++)
prov.options[prov.options.length]=new Option(ar[i][0],ar[i][0])
function provChanged(i)
{
city.innerHTML=""
for (var j=0;j<ar[i][1].length;j++)
city.options[city.options.length]=new Option(ar[i][1][j],ar[i][1][j])
}
//初始化
provChanged(0);
function show()
{
alert(prov.value+city.value)
}
</script>
</head>
<body>
<select id=prov style="width:100" οnchange="provChanged(selectedIndex)"></select>
<select id=city style="width:100"></select>
<button οnclick="show()">test</button>
</body>
</html>
可以看出我们必须构造ar这样一个数组；
[
[ [“省1”]，[“市1”，“市2”，…..,“市N”] ]，
[ [“省2”]，[“市1”，“市2”，…..，“市N”] ]，…..
]
于是三级联动的构建便在于provChanged（selectedIndex）；在city中也需要一个cityChange（selectedIndex）方法！
数据库实现方式为：
<strong>省份</strong> <select name=province> </select>
<strong>市/县</strong> <select name=city> </select>
<script>
var arrSel=["province","city"];//arrSel定义了要修改的下拉框
var i=0,arrData=[];//arrData中搁的是数据,每条都显示各级的数据
<%
ResultSet rs=stmt.executeQuery("select a.P_name,b.C_name from CRM_PROVINCE a,CRM_CITY b where b.P_code=a.P_code");
while(rs.next()){
%>
//构造下拉数组，它是通过[“省”，“市”][ “省”，“市”]……
arrData[i++]=["<%=rs.getString("P_name")%>","<%=rs.getString("C_name")%>"]
<%
}
%>
</script>
<script>
function qswhInit(num){
var i,j,arrTemp=[];
//循环构建定位下拉列表
for(i=0;i<num;i++)arrTemp[i]=document.all(arrSel[i]).options[document.all(arrSel[i]).selectedIndex].text
if(num==arrSel.length){//这里处理最后的数据。
return;
}
with(document.all(arrSel[num])){
length=0
for(i=0;i<arrData.length;i++){
for(j=0;j<num;j++)
//使J变到当前下拉位置，并且过滤数据
if(arrTemp[j]!=arrData[i][j])break;
//没有到当前列表位置，不再填值
if(j!=num)continue;
//当前下拉列表的子位置，填值
if(length==0||options[length-1].text!=arrData[i][num])
options[length++].text=arrData[i][num];
}
οnchange=new Function("qswhInit("+(num+1)+")");
onchange();
}
}
qswhInit(0);//初始化
</script>
arrSel[] 和 arrData[] 前者决定下拉列表的id 后者决定里面的数据，由此可以扩展为N级的下拉关联！
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
