三级联动下拉表单的源代码
2008-04-08 19:00
281 查看
<html>
<head>
<title>三级联动下拉表单试验</title>
<!--=======打开数据库======-->
<%
Set Conn = Server.CreateObject("ADODB.Connection")
StrCnn = "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("db1.mdb") & ";"
Conn.Open StrCnn
%>
</head>
<body>
<form name="myform" method="post">
<%
set rs=server.CreateObject("adodb.recordset")
sq="select * from 一级表"
rs.open sq,conn,1,1
%>
<select name="class1" onChange="changeclass2();changeclass3()">
<option value="" selected>选择一级目录</option>
<%
while not rs.eof
%>
<option value="<%=rs("一级类")%>"><%=rs("一级类")
%>
</option>
<%
rs.movenext
wend
rs.close
%>
</select>
<select name="class2" onChange="changeclass3()">
<option value="" selected>选择二级目录</option>
</select>
<select name="class3">
<option value="" selected>选择三级目录</option>
</select>
<%
sql="select * from 二级表"
rs.open sql,conn,1,1
num=rs.recordcount
str=""
for i=1 to rs.recordcount
str=str&rs("一级类")&"-"&rs("二级类")&","
if rs.eof then exit for
rs.movenext
next
rs.close
%>
<%
sql="select * from 三级表"
rs.open sql,conn,1,1
num2=rs.recordcount
str2=""
for i=1 to rs.recordcount
str2=str2&rs("二级类")&"-"&rs("三级类")&","
if rs.eof then exit for
rs.movenext
next
rs.close
%>
<!--下面是实现动态改变下一级菜单的脚本代码-->
<script LANGUAGE="javascript">
arr="<%=str%>".split(",");
a=arr.length
ar=new Array()
for (i=0;i<a;i++){
ar[i]=arr[i].split("-");
}
onecount=ar.length;
arr2="<%=str2%>".split(",");
a2=arr2.length
ar2=new Array()
for (i=0;i<a2;i++){
ar2[i]=arr2[i].split("-");
}
onecount2=ar2.length;
function changeclass2() {
document.myform.class2.length=0
lid=myform.class1.value;
for (i=0;i<onecount;i++) {
if (ar[i][0] == lid) {
document.myform.class2.options.add(new Option(ar[i][1], ar[i][1]));
}
}
}
function changeclass3() {
document.myform.class3.length=0
lid2=myform.class2.value;
for (i=0;i<onecount2;i++) {
if (ar2[i][0] == lid2) {
document.myform.class3.options.add(new Option(ar2[i][1], ar2[i][1]));
}
}
}
</script>
参考有关资料,编了这个三级联动下拉表单的源代码,二级和四级联动下拉表单可以在此基础上简单改一下就行了。这个代码由于使用“-”作为分隔符,所以数据库中不能有“-”,如果一定要有“-”,可以把源代码改一下就行了。
</body>
</html>
<head>
<title>三级联动下拉表单试验</title>
<!--=======打开数据库======-->
<%
Set Conn = Server.CreateObject("ADODB.Connection")
StrCnn = "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("db1.mdb") & ";"
Conn.Open StrCnn
%>
</head>
<body>
<form name="myform" method="post">
<%
set rs=server.CreateObject("adodb.recordset")
sq="select * from 一级表"
rs.open sq,conn,1,1
%>
<select name="class1" onChange="changeclass2();changeclass3()">
<option value="" selected>选择一级目录</option>
<%
while not rs.eof
%>
<option value="<%=rs("一级类")%>"><%=rs("一级类")
%>
</option>
<%
rs.movenext
wend
rs.close
%>
</select>
<select name="class2" onChange="changeclass3()">
<option value="" selected>选择二级目录</option>
</select>
<select name="class3">
<option value="" selected>选择三级目录</option>
</select>
<%
sql="select * from 二级表"
rs.open sql,conn,1,1
num=rs.recordcount
str=""
for i=1 to rs.recordcount
str=str&rs("一级类")&"-"&rs("二级类")&","
if rs.eof then exit for
rs.movenext
next
rs.close
%>
<%
sql="select * from 三级表"
rs.open sql,conn,1,1
num2=rs.recordcount
str2=""
for i=1 to rs.recordcount
str2=str2&rs("二级类")&"-"&rs("三级类")&","
if rs.eof then exit for
rs.movenext
next
rs.close
%>
<!--下面是实现动态改变下一级菜单的脚本代码-->
<script LANGUAGE="javascript">
arr="<%=str%>".split(",");
a=arr.length
ar=new Array()
for (i=0;i<a;i++){
ar[i]=arr[i].split("-");
}
onecount=ar.length;
arr2="<%=str2%>".split(",");
a2=arr2.length
ar2=new Array()
for (i=0;i<a2;i++){
ar2[i]=arr2[i].split("-");
}
onecount2=ar2.length;
function changeclass2() {
document.myform.class2.length=0
lid=myform.class1.value;
for (i=0;i<onecount;i++) {
if (ar[i][0] == lid) {
document.myform.class2.options.add(new Option(ar[i][1], ar[i][1]));
}
}
}
function changeclass3() {
document.myform.class3.length=0
lid2=myform.class2.value;
for (i=0;i<onecount2;i++) {
if (ar2[i][0] == lid2) {
document.myform.class3.options.add(new Option(ar2[i][1], ar2[i][1]));
}
}
}
</script>
参考有关资料,编了这个三级联动下拉表单的源代码,二级和四级联动下拉表单可以在此基础上简单改一下就行了。这个代码由于使用“-”作为分隔符,所以数据库中不能有“-”,如果一定要有“-”,可以把源代码改一下就行了。
</body>
</html>
相关文章推荐
- 两种js动态三级联动下拉表单测试
- 三级联动 省市区下拉列表
- jquery+html三级联动下拉框及详情页面加载时的select初始化问题
- SharePoint:扩展DVWP - 第21部分:实现可维护的三级联动下拉框
- 国家、省、市三级联动下拉列表
- JQuery+Ajax实战三级下拉列表联动(八)
- 2017最新版省市区三级联动下拉框+所有源代码以及数据库
- 参数表单下拉数据集多选联动问题及解决办法
- Ajax制作的下拉列表三级联动
- 公众号门店管理开发,实现select表单省市县三级联动1
- 用jquery写的json省市县三级联动下拉
- jQuey/js 省市县三级下拉框联动的回显(简单易懂)
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航
- Ajax来实现下拉框省市区三级联动效果(服务端基于express)
- 关于三级联动下拉框的示例代码
- Ajax实现三级联动下拉框
- SAP选择屏幕中实现三级联动下拉框效果
- JS年月日三级联动下拉框日期选择代码
- 实现年月日表单三级联动
- js操纵跨frame的三级联动select下拉选项