我的ASP之旅—二级联动菜单制作

这个问题其实已经蛮老了，不过作为刚学ASP3个月的我来说，还是有必要写下来强化自己的基础知识。

就拿最常用的“省市下拉列表联动”作为例子吧！

在我们制作网站会员注册信息时，一般会涉及到填写自己所在省/市，如果用input或textarea做成填写形式不太理想。所以大部分网站都会选择联动下来列表形式，做起来也不算很复杂，同时看上去也很轻松。

具体做法如下：

1.设计数据库

我们选用Access数据库。首先，新建名为database1.mdb的Access数据库

在database1.mdb数据库中建立两个表分别为province、city。具体字段设计如下：

Province(省)

具体字段：id—自动编号 ProvinceName—省名 ProvinceNo—省名编号 ProvinceOrder—省排序编号

省 id	ProvinceName	ProvinceNo	ProvinceOrder
1	北京市	0	0
2	安徽省	1	1
3	山东省	2	2
4	江苏省	3	3

以下省名略。

设计思想：id是表的自动编号，ProvinceName和ProvinceNo是必须的，前者是用来存储省名，后者则是联系表city必不可少的字段。至于ProvinceOrder则是用来给省名排序的，控制下拉列表中省名出现的位置，可以省略。

City(城市)

具体字段：id—自动编号 CityName—市名 CityNo—市名编号 CityOrder—市排序编号 ProvinceID—所在省编号

市

CityName

CityNo

CityOrder

ProvinceID

---|---|---|---|---

北京市

合肥市

芜湖市

安庆市

5 |

济南市

6 |

青岛市

以下市名略。

设计思想：前面四项同Province表设计思想，ProvinceID字段将Province表和City表联系起来。

2.设计样式及编码

二级联动的样式很简单，在DreamWeaver 2004里向设计页面上放置两个select下拉菜单，分别取名为Province_select、City_select，它们都在名为form1的表单里。

编码需要用到html、vbscript及javascript。首先是连接数据库，我们用常用的

连接。conn.asp中代码略。

其次，用Javascript和Vbscript将Province和City表中的数据读出来并使Province_select和City_select联系起来，这一步是整个程序的关键所在。
代码如下：

1<script language="JavaScript">

dim sql,i,j
'//////////////////////////读出 Province 表//////////////////////////
set rs_Province=server.createobject("adodb.recordset")
sql="select * from Province order by ProvinceOrder"
rs_Province.open sql,conn,1,1

1
2
3var selects=[];   
4selects['xxx']=new Array(new Option('请选择城市……','xxx'));

for i=1 to rs_s.recordcount

1
2
3selects['```
4=rs_Province("ProvinceNo")
5```']=new Array(

'//////////////////////////读出 City 表//////////////////////////
set rs_City=server.createobject("adodb.recordset")
sql="select * from City where ProvinceID="&rs_Province("id")&" order by ProvinceOrder"
rs_City.open sql,conn,1,1
if rs_City.recordcount>0 then
for j=1 to rs_City.recordcount
if j=rs_City.recordcount then

1
2
3new Option('```
4=trim(rs_City("CityName"))
5```','```
6=trim(rs_City("CityNo"))
7```'));

else

1
2
3new Option('```
4=trim(rs_City("Cityname"))
5```','```
6=trim(rs_City("CityNo"))
7```'),

end if
rs_City.movenext
next
else

1new Option('','0'));

end if
rs_City.close
set rs_City=nothing
rs_Province.movenext
next
rs_Province.close
set rs_Province=nothing

 1
 2
 3<!--//////////JavaScript控制联动///////////-->   
 4function chsel(){   
 5with (document.form1){   
 6if(province_select.value) {   
 7city_select.options.length=0;   
 8for(var i=0;i<selects[province_select.value].length;i++){   
 9city_select.add(selects[province_select.value][i]);   
10}   
11}   
12}   
13} 
14
15</script>

最后，结合html，Javascript和Vbscript实现联动效果。代码如下：

1<select name="Province_select" onchange="chsel()">
2<option selected="" value="xxx">请选择省份……</option>

dim tmpid '定义一个临时变量用来记住省id
tmpid=0

set rs_Province=server.CreateObject("ADODB.recordset")
sql="select * from Province order by ProvinceOrder"
rs_Province.open sql,conn,1,1
while not rs_Province.eof
tmpid=rs_Province("id")

1<option ```"="" provinceno")="" value="```
2=rs_Province(">```
3=trim(rs_Province("ProvinceName"))
4```</option>

rs_Province.movenext
wend
rs_Province.close
set rs_Province=nothing

1</select>

1<select name="City_select">

set rs_City=server.createobject("adodb.recordset")
sql="select * from City where ProvinceID="&tmpid&" order by CityOrder"
rs_City.open sql,conn,1,1
while not rs_City.eof

1<option ```"="" cityno")="" value="```
2=rs_City(">```
3=trim(rs_City("CityName"))
4```</option>

rs_City.movenext
wend
rs_City.close
set rs_City=nothing

1</select>

至此，一个省市二级联动菜单程序便写好了。虽然代码不多，但反映的技术还是比较全面的。希望以后能多学点知识，写点更好的东东^_^