logo 广告
Loading...
 导航 所在位置:论坛首页 -> ┈┋电脑网络┋┈ -> Asp/Asp.Net教程 -> 我的ASP之旅—二级联动菜单制作
回复
标题:我的ASP之旅—二级联动菜单制作收藏 编辑 删除 楼主 | 上一篇 下一篇
no哪颗键
头像
等级:社区游侠
权限:普通用户
积分:43
金钱:2234
声望:60
经验:60
发帖数:580
注册:2007年12月6日
资料 短消息2008-5-2 15:20:49

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

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

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

体做法如下:

1.设计数据库

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

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

Province(省)

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

 

以下省名略。

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

City(城市)

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

 

以下市名略。

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

签名

2008-5-2 15:20:49 顶部
no哪颗键
头像
等级:社区游侠
权限:普通用户
积分:43
金钱:2234
声望:60
经验:60
发帖数:580
注册:2007年12月6日
  资料  消息 短消息编辑 删除 引用 第2楼

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>     

至此,一个省市二级联动菜单程序便写好了。虽然代码不多,但反映的技术还是比较全面的。希望以后能多学点知识,写点更好的东东^_^
签名
2008-5-2 15:21:15 顶部
第1页 共1页 共1个回复     <<    >>    
 快速回复
  • 支持UBB,HTML标签

  • 高级回复

  • 操作选项:评分 加精 解精 奖惩 设专题 设公告 解公告 固顶 总固顶 解固顶 结帖 解结帖 锁帖 解锁 移帖 删帖
      首页 | 购买指南 | 虚拟主机 | 特色介绍 | 下载中心 | 支付方式
    Copyright 2004-2008 BBSGood.com Powered By: BBSGood.Speed Version 5.0
      咨询电话:0575-85513832、0575-85513825(传真)、7*24小时咨询服务:13606552007 不良信息举报中心 浙ICP备05029817号
      业务QQ:38958768、客服QQ1:415896239、客服QQ2:343896043、MSN:jccsxx@hotmail.com