asp二级下接菜单
时间：2010-04-17 来源：mx11
一个简单的二级联动菜单制作。用来点击省后显示相应的县市。
具体做法如下：
1.设计数据库
我们选用sql2000数据库。先建个数据库或者用已经有的数据库。然后在数据库中建立两个表分别为province、city。具体字段设计如下：
Province(省)
具体字段：
id—自动编号 ProvinceName—省名 ProvinceNo—省名编号 ProvinceOrder—省排序编号
省表| id | ProvinceName | ProvinceNo | ProvinceOrder |
| 1 | 北京市 | 1 | 1 |
| 2 | 安徽省 | 2 | 2 |
| 3 | 山东省 | 3 | 3 |
| 4 | 内蒙古自治区 | 4 | 4 |
以下省名略自己酌情添加。
设计思想：id是表的自动编号，ProvinceName和ProvinceNo是必须的，前者是用来存储省名，后者则是联系表city必不可少的字段。至于ProvinceOrder则是用来给省名排序的，控制下拉列表中省名出现的位置，可以省略。
City(城市)
具体字段：id—自动编号 CityName—市名 CityNo—市名编号 CityOrder—市排序编号 ProvinceID—所在省编号
市表|
id |
CityName |
CityNo |
CityOrder |
ProvinceID |
|
1 |
北京市 |
1 |
1 |
1 |
|
2 |
合肥市 |
2 |
2 |
2 |
|
3 |
芜湖市 |
3 |
3 |
2 |
|
4 |
安庆市 |
4 |
4 |
2 |
| 5 |
济南市 |
5 |
5 |
3 |
| 6 |
呼和浩特市 |
6 |
6 |
4 |
以下市名略。
设计思想：前面四项同Province表设计思想，ProvinceID字段将Province表和City表联系起来。
2.设计样式及编码
二级联动的样式很简单，在网页里向页面上放置两个select下拉菜单，分别取名为Province_select、City_select（根据自己喜好，叫“熊猫”“狗熊”也可以，大家不妨试试），它们都在名为form1的表单里。
用Javascript和Vbscript将Province和City表中的数据读出来并使Province_select和City_select联系起来，这一步是整个程序的关键所在。
代码如下：
需要包含一个链接数据库的网页dbpass.asp。内容如下：
<%
Const constDSN = "NpoMy"
Const constUID = "sa"
Const constPWD = "sa"
%>
需要在开始 控制面板 管理工具 数据源 系统DSN 添加。大家应该都明白。就不废话了。
联动网页代码：
<!--#include file="includes/dbpass.asp"-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>二级联动菜单</title>
<%
'连接数据库
dim db,conn,rs_Province,rs_City
set conn = server.createobject("adodb.connection")
conn.open constDSN, constUID, constPWD
%>
<script language=JavaScript>
<%
dim sql,i,j
'//////////////////////////读出 Province 表//////////////////////////
set rs_Province= server.createobject("adodb.recordset")
sql="select * from changeless.dbo.Province order by ProvinceOrder"
rs_Province.open sql,conn,1,1,&h0001
%>
var selects=[];
selects['yyy']=new Array(new Option('请选择城市……','yyy'));
<%
for i=1 to rs_Province.recordcount
%>
selects['<%=rs_Province("ProvinceNo")%>']=new Array(
<%
'//////////////////////////读出 City 表//////////////////////////
set rs_City= server.createobject("adodb.recordset")
sql="select * from changeless.dbo.City where ProvinceID="&rs_Province("ProvinceNo")&" order by CityOrder"
rs_City.open sql,conn,1,1,&h0001
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!="yyy") {
City_select.options.length=0;
City_select.add(selects['yyy'][0]);
for(var i=0;i<selects[Province_select.value].length;i++){
City_select.add(selects[Province_select.value][i]);
}
}
}
}
</script>
</head>
<body>
<FORM name="form1">
<!--//////////////////////////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 changeless.dbo.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>
<%
'response.Write form1.province_select.value
rs_Province.movenext
wend
rs_Province.close
set rs_Province=nothing
%>
</select>
<!--//////////////////////////City_select下拉列表//////////////////////////-->
<select name="City_select">
<option value="yyy" selected="selected">-城市-</option>
</select>
</FORM>
</body>
</html>
至此，一个省市二级联动菜单程序便写好了。虽然代码不多，但反映的技术还是比较全面的。需要理解表单，表单元素，数组等等，可以学到不少东西。大家可以仔细研究一下。需要说明的是，这种联动是全部读出数据内容后用javascript来控制显示相应内容，并没有减轻服务器负担。如果要做的需要什么再读数据库那就需要新技术AJAX,以后再讨论吧。
AJAX简介：AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
相关阅读 更多 +
