手机站
网通分站
电信主站
密 码:
用户名:
当前位置 : 主页>网络编程>Asp编程>列表

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

来源:互联网 作者:west263.com 时间:2008-02-23
西部数码-全国虚拟主机10强!40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!

这个问题其实已经蛮老了,不过作为刚学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—所在省编号

id

CityName

CityNo

CityOrder

ProvinceID

1

北京市

1

1

0

2

合肥市

2

2

1

3

芜湖市

3

3

1

4

安庆市

4

4

1

5

济南市

5

5

2

6

青岛市

6

6

2

以下市名略。

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

2.设计样式及编码

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

编码需要用到html、vbscript及javascript。首先是连接数据库,我们用常用的<!--#include file="conn.asp"-->连接。conn.asp中代码略。

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

<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
%>

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

<%
for i=1 to rs_s.recordcount
%>

selects['<%=rs_Province("ProvinceNo")%>']=new Array(
<%
'//////////////////////////读出 City 表//////////////////////////
set rs_City=server.createobject("adodb.recordset")
sql="select * from City where ProvinceID="&rs_Province("id")&" order by ProvinceOrder"

文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!