·您的位置: 首页 » 资源教程 » 编程开发 » ASP » 我的ASP之旅:二级联动菜单制作

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

类别: ASP教程  评论数:0 总得分:0
这个问题其实已经蛮老了,不过作为刚学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"
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
%>


new Option(\'<%=trim(rs_City("CityName"))%>\',\'<%=trim(rs_City("CityNo"))%>\'));

<%else%>


new Option(\'<%=trim(rs_City("Cityname"))%>\',\'<%=trim(rs_City("CityNo"))%>\'),

<%
end if
rs_City.movenext
next
else
%>
new Option(\'\',\'0\'));


<%
end if
rs_City.close
set rs_City=nothing
rs_Province.movenext
next
rs_Province.close
set rs_Province=nothing
%>


<!--//////////JavaScript控制联动///////////-->
function chsel(){
with (document.form1){
if(province_select.value) {
city_select.options.length=0;
for(var i=0;i<selects[province_select.value].length;i++){
city_select.add(selects[province_select.value][i]);
}
}
}
}

</script>

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

<!--//////////////////////////Province_select下拉列表//////////////////////////-->
<select name="Province_select" onChange=chsel()>
<option value="xxx" selected>请选择省份……</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")
%>
<option value="<%=rs_Province("ProvinceNo")%>" ><%=trim(rs_Province("ProvinceName"))%></option>
<%
rs_Province.movenext
wend
rs_Province.close
set rs_Province=nothing
%>
</select>

<!--//////////////////////////City_select下拉列表//////////////////////////-->
<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
%>
<option value="<%=rs_City("CityNo")%>"><%=trim(rs_City("CityName"))%></option>
<%
rs_City.movenext
wend
rs_City.close
set rs_City=nothing
%>
</select>

至此,一个省市二级联动菜单程序便写好了。虽然代码不多,但反映的技术还是比较全面的。希望以后能多学点知识,写点更好的东东^_^
-= 资 源 教 程 =-
文 章 搜 索
关键词:
类型:
范围:
纯粹空间 softpure.com
Copyright © 2006-2008 暖阳制作 版权所有
QQ: 15242663 (拒绝闲聊)  Email: faisun@sina.com
 纯粹空间 - 韩国酷站|酷站欣赏|教程大全|资源下载|免费博客|美女壁纸|设计素材|技术论坛   Valid XHTML 1.0 Transitional
百度搜索 谷歌搜索 Alexa搜索 | 粤ICP备19116064号-1