 |
|
|
 首页 |
名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
这个问题其实已经蛮老了，不过作为刚学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> 至此，一个省市二级联动菜单程序便写好了。虽然代码不多，但反映的技术还是比较全面的。希望以后能多学点知识，写点更好的东东^_^ 返回类别: 教程 上一教程: 用正则表达式写的HTML分离函数 下一教程: ASP组件初级入门与精通系列之六 您可以阅读与"我的ASP之旅：二级联动菜单制作"相关的教程: · 我的ASP之旅?二级联动菜单制作 · ASP按钮菜单制作实例 · 我的ASP之旅?无组件生成缩略图 · DW+ASP玩转动态二级菜单 · DW+ASP 玩转动态二级菜单 |
  |
| 快精灵印艺坊 版权所有 |
首页 会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店
|
||
