首页 | 站长免费中心 | 新手上路 | 网站运营 | 网页制作 | 图片设计 | 动画设计 | 网页编程 | 网页特效 | 本站专题 | 虚拟主机 | 域名注册 | 网站建设 | 程序下载
       免费空间资源 | 新闻咨询 | 免费域名 | 免费网盘 | 网站推广 | 网站策划 | 建站经验 | 网站优化 | 网页代码 | 源码下载 | 音乐小偷 | 网络赚钱 | 论坛交流
网站建设
网站建设
虚拟主机
虚拟主机
域名注册
域名注册
711网络首页
站长工具
站长工具
网站源码
网站源码
站长论坛
站长论坛

 711网络 网页编程ASP代码

ASP+JavaScript+数据库 级联下拉菜单

来源: 互联网    日期:2008-4-30
 

<!--
***********************************
ASP+JavaScript+数据库 级联下拉菜单
***********************************
     以前都用JS的多级级联下拉菜单,但那个有局限性,每次更新列表项内容时都必须修改程序,
今天有空,写了这个数据库形式的,易于管理和修改,且你可以在此思路上建立更多级的级联菜单。
     好了,废话少说,言归正传。
      测试数据库:test.mdb     你可以自己建一个。
      -----------------------------------------------------------------------------
                  表名:        字段1            字段2                 字段3
      -----------------------------------------------------------------------------
      表1:      big_class     big_class_id     big_class_name
      表2:     small_class   small_class_id     small_class_name   belongto_big_class
      数据类型                自动编号             文本                 数字
      -----------------------------------------------------------------------------
      以下是程序清单,共1个文件,文件名:test.asp

<%
'option explicit
dim conn,connstr,db
db="test.mdb"       '测试数据库
Set conn = Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(""&db&"")
conn.Open connstr
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ASP+JavaScript+数据库 级联下拉菜单</title>
<style>
table{border: #00215a 1px dashed;}
td{font-size:12px;}
input,select{
      font-size:9pt;
      border-style:solid;
      border-width:1;
      cursor:default;
      color:#03326B;
      background-color:#FFFFFF;
      height:16px;
}
a:link,a:visited{color: #000000;text-decoration: none;}
a:hover {color: #ff0000;text-decoration: none;FILTER: glow(color=ffffff,strength=0) shadow(color=aaaaaa,direction:135); POSITION: relative; WIDTH: 100%;}
</style>
<script language="JavaScript">
function addbig(){
document.all.a.style.display="block";
document.all.b.style.display="none";
document.all.c.style.display="none";
}
function addsmall(){
document.all.b.style.display="block";
document.all.a.style.display="none";
document.all.c.style.display="none";
}
function viewmenu(){
document.all.a.style.display="none";
document.all.b.style.display="none";
document.all.c.style.display="block";
}
</script>
<%
'从小类表中取出数据
            set rs=server.CreateObject("adodb.recordset")
            sql="select * from small_class "
            rs.open sql,conn,1,1
%>
<script language="JavaScript">
var num;
//定义数组
var calArray=new Array();
<%
dim j
j=0
do while not rs.eof
%>
//将小类表中的所有相关记录存到数组calArray的对应元素中。
calArray[<%=j%>]=new Array("<%=rs("small_class_id")%>","<%=rs("small_class_name")%>","<%=rs("belongto_big_class")%>");
<%
j=j+1
rs.movenext
loop
rs.close
set rs=nothing
%>
//给num赋值为记录总数
num=<%=j%>
function givevalue(myvalue){
/*当选择大类列表的值不为空时首先清空小类下拉列表的所有项目。不然小类列表中的项目会叠加的。
同时也是初始化 options 的值为0 */
document.form3.small_class_select.length = 0;
//循环写出请求的大类所对应的小类。
     for (i=0;i < num; i++)
         {
             if (calArray[i][2] == myvalue)
             {
              document.form3.small_class_select.options[document.form3.small_class_select.length] = new Option(calArray[i][1], calArray[i][0],"","");
                   /*定义新的Option对象并赋值。options的索引值从0开始。new Option对象有4个属性,对应分别是:文本串、value、defaultSelect、selected。在这里只用了第一个和第二个。*/
                  }        
          }
}
</script>
<script language="JavaScript">
function chk1(){
if (form1.big_class_name.value=="")
      {
      alert("请输入大类名称!");
      form1.big_class_name.focus();
      return false;
      }
}
function chk2(){
if (form2.small_class_name.value=="")
      {
      alert("请输入小类名称!");
      form2.small_class_name.focus();
      return false;
      }
}

</script>
</head>

<body background="background.jpg">
<%
dim rs,sql,noclass
select case request("action")
      case "addbigclass"
      addbigclass
      case "addsmallclass"
      addsmallclass
end select
%>
<div align="center"></div>
<table width="60%" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr valign="middle">
     <td height="48" colspan="3">
       <div align="center"><font color="#999900"><b><font color="#FF0000">ASP</font>+<font color="#FF0000">JavaScript</font>+<font color="#FF0000">数据库</font>
         级联下拉菜单</b></font></div></td>
   </tr>
   <tr>
     <td width="22%" height="21" valign="bottom"><a href="#" onClick="addbig()">添加大类</a>
     </td>
     <td width="22%" valign="bottom"><a href="#" onClick="addsmall()">添加小类</a></td>
     <td width="56%" valign="bottom"><a href="#" onClick="viewmenu()">预览效果</a></td>
   </tr>
   <tr>
     <td height="33" colspan="3" valign="top">
       <hr align="left" width="60%" size="1" color="#999900">
     </td>
   </tr>
   <tr>
     <td colspan="3" valign="top"> <div id="a" style="display:none">
         <form name="form1" method="post" action="?action=addbigclass" onSubmit="return chk1()">
           大类名称:
           <input name="big_class_name" type="text" id="big_class_name" size="16">
           <input type="submit" name="Submit" value=" 添 加 ">
         </form>
       </div>
       <div id="b" style="display:none">
         <form name="form2" method="post" action="?action=addsmallclass" onSubmit="return chk2()">
           选择大类后添加小类:
           <select name="addselect">
             <%
            set rs=server.CreateObject("adodb.recordset")
            sql="big_class"
            rs.open sql,conn,1,1
            if rs.eof or rs.bof then
            %>
             <option selected>还没有添加大类</option>
             <%
            else
            do while not rs.eof
            %>
             <option value="<%=rs("big_class_id")%>"><%=trim(rs("big_class_name"))%></option>
             <%
            rs.movenext
            loop
            end if
            rs.close
            set rs=nothing
            %>
           </select>
           小类名称:
           <input name="small_class_name" type="text" id="small_class_name" size="16">
           <input type="submit" name="Submit2" value=" 添 加 ">
         </form>
       </div>
       <div id="c" style="display:block">
         <form name="form3" method="post" action="">
           <select name="big_class_select" onChange="givevalue(document.form3.big_class_select.options[document.form3.big_class_select.selectedIndex].value)">
             <%
                  dim firstid
            set rs=server.CreateObject("adodb.recordset")
            sql="select * from big_class order by big_class_id"
            rs.open sql,conn,1,1
            if rs.eof or rs.bof then
            noclass=1
            %>
             <option selected>还没有添加大类</option>
             <%
            else
            rs.movefirst
            firstid=rs("big_class_id")
            '在没有选择大类(页面刚载入)时要载入的大类。
            %>
             <option value="<%=rs("big_class_id")%>" selected><%=trim(rs("big_class_name"))%></option>
             <%
            rs.movenext
            do while not rs.eof
            %>
             <option value="<%=rs("big_class_id")%>"><%=trim(rs("big_class_name"))%></option>
             <%
            rs.movenext
            loop
            end if
            rs.close
            set rs=nothing
            %>
           </select>
           <select name="small_class_select">
             <%if noclass=1 then%>
             <option value="" selected>没有小类</option>
             <%
            else
            '在没有选择大类(页面刚载入)时要载入的小类,要跟默认的大类对应。
            set rs=server.CreateObject("adodb.recordset")
            sql="select * from small_class where belongto_big_class="&firstid
            rs.open sql,conn,1,1
            if rs.eof or rs.bof then
            %>
             <option value="" selected>没有小类</option>
             <%
            else
            do while not rs.eof
            %>
             <option value="<%=rs("small_class_id")%>"><%=trim(rs("small_class_name"))%></option>
             <%
            rs.movenext
            loop
            end if
            rs.close
            set rs=nothing
         end if
            %>
           </select>
         </form>
       </div></td>
   </tr>
</table>
<%
sub addbigclass()
            set rs=server.CreateObject("adodb.recordset")
            sql="select * from big_class where big_class_name='"&trim(request("big_class_name"))&"'"
            rs.open sql,conn,1,3
            if not(rs.eof and rs.bof) then
            response.Write("<script>alert('该大类已经存在!');</script>")
            else
            rs.addnew
            rs("big_class_name")=trim(request("big_class_name"))
            rs.update
            response.Write("<script>alert('大类添加成功!');self.location='test.asp?action=viewmenu';</script>")
            end if
            rs.close
            set rs=nothing
end sub
sub addsmallclass()
            set rs=server.CreateObject("adodb.recordset")
            sql="select * from small_class where small_class_name='"&trim(request("small_class_name"))&"' and belongto_big_class="&request("addselect")
            rs.open sql,conn,1,3
            if not(rs.eof and rs.bof) then
            response.Write("<script>alert('该小类已经存在!');</script>")
            else
            rs.addnew
            rs("belongto_big_class")=request("addselect")
            rs("small_class_name")=trim(request("small_class_name"))
            rs.update
            response.Write("<script>alert('小类添加成功!');self.location='test.asp?action=viewmenu';</script>")
            end if
            rs.close
            set rs=nothing
end sub
conn.close
set conn=nothing
%>
<table width="60%" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
     <td width="48%"> <div align="right">Copyright © </div></td>
     <td width="1%"> </td>
     <td width="11%"><b><a href="http://cooleasy.xicp.net/">酷易在线</a></b> </td>
     <td width="40%"><a href="mailto:xljxlj279@126.com">联系站长</a></td>
   </tr>
</table>
</body>
</html>



更多的ASP+JavaScript+数据库 级联下拉菜单请到论坛查看: http://BBS.TC711.COM



【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源: 互联网    日期:2008-4-30   

发 表 评 论
查看评论

  您的大名:
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
认证编码: 刷新验证码
点评内容: 字数0
  精品推荐  
  本月推荐  
  友情赞助  

关于我们 | 联系我们 | 广告投放 | 留言反馈 | 免费程序 | 虚拟主机 | 网站建设 |  网站推广 |  google_sitemap baidu_sitemap RSS订阅
本站所有资源均来自互联网,如有侵犯您的版权或其他问题,请通知管理员,我们会在最短的时间回复您
Copyright © 2005-2015 Tc711.Com All Rights Reserved 版权所有·711网络   蜀ICP备05021915号
110网监备案 信息产业备案 不良信息举报