ASP二级联动下拉菜单

来源：互联网发布：威纶通eb8000编程实例编辑：程序博客网时间：2024/05/01 17:03

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


<%
'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>

**********************************************************************************************************************

从数据库读出数据生成关联下拉菜单!
<table width="74" border="0" cellpadding="1" cellspacing="0">
   <tr>
      <td width="37"><select name="ClassName" id="ClassName" onChange="opensubselect(document.all.SubClass,document.all.ClassName.value)">
         
      </select></td>
      <td width="37"><select name="SubClass" id="SubClass">
      </select></td>
   </tr>
   <script language="JAVASCRIPT" type="TEXT/JAVASCRIPT">
var SubClass=[],SubClassID=[];
<%
Dim Rs_Class,Rs_SubClass,SqlStr,i,j,SubClassStr,SubClassID
Set Rs_Class=Server.CreateObject("ADODB.RecordSet")
Set Rs_SubClass=Server.CreateObject("ADODB.RecordSet")
SqlStr="Select * From [p_softClass]"
Rs_Class.open SqlStr,ConnStr,1,1
For i=1 to Rs_Class.RecordCount
Response.Write "document.all.ClassName.add(new Option('" & Rs_Class("name") & "'," & i &"));" & chr(13)
SqlStr="SELECT * FROM [p_soft_SubClass] WHERE ([pid]=" & Rs_Class("id") & ")"
Rs_SubClass.open SqlStr,ConnStr,1,1
SubClassStr=""
SubClassID=""
For j=1 To Rs_SubClass.RecordCount
SubClassStr=SubClassStr & "'" & Rs_SubClass("name") & "',"
SubClassID=SubClassID & Rs_SubClass("ID") & ","
Rs_SubClass.MoveNext
Next
If len(SubClassStr)>0 Then
Response.Write "SubClass[" & i & "]=new Array(" & Left(SubClassStr,Len(SubClassStr)-1) & ");" & chr(13)
Response.Write "SubClassID[" & i & "]=new Array(" & Left(SubClassID,Len(SubClassID)-1) & ");" & Chr(13)
Else
Response.Write "SubClass[" & i & "]=new Array();" & chr(13)
End If
Rs_SubClass.close
Rs_Class.MoveNext
Next
Rs_Class.close
Set Rs_SubClass=nothing
Set Rs_Class=nothing
%>
function opensubselect(obj,id)
{
var i=SubClass[id].length;
obj.options.length=0;
// obj.add(new Option(SubClass[0]));
for(var h=0;h<i;++h)
{
obj.add(new Option(SubClass[id][h],SubClassID[id][h]));
}
}
opensubselect(document.all.SubClass,document.all.ClassName.value);
</script>
</table>

*************************************************************************************************************************
　　
　　'联社信用社二级联动

Sub LianDong2Ji()
　　dim rsel,count,lastm
　　set rsel=server.createobject("adodb.recordset")
　　%>
　　<script language = "JavaScript">
　　
　　
　　var onecount1;
　　onecount1=0;
　　rootcat = new Array();
　　<%
　　count = 1
　　lastm = ""
　　%>
　　rootcat[0] = new Array("0","请选择县级联社","0");
　　<%
　　rsel.open "Select XjlsMC,XjlsDH From XJLS Order By XjlsDH",MyConn,1,1
　　
　　do while Not rsel.eof
　　%>
　　rootcat[<%=count%>] = new Array("0","<%= trim(rsel(0))%>","<%= trim(rsel(1))%>");
　　<%
　　count = count + 1
　　rsel.movenext
　　loop
　　rsel.close
　　%>
　　onecount1=<%=count%>;
　　
　　var onecount2;
　　onecount2=0;
　　subcat = new Array();
　　<%
　　count = 1
　　lastm = ""
　　%>
　　subcat[0] = new Array("0","请先选择县级联社","0");
　　<%
　　rsel.open "Select XjlsDH,JC,SH From XYS Order By XjlsDH,SH",MyConn,1,1
　　do while not rsel.eof
　　if lastm <> trim(rsel("XjlsDH")) then
　　%>
　　subcat[<%=count%>] = new Array("<%= trim(rsel(0))%>","请选择信用社","0");
　　<%
　　lastm = trim(rsel("XjlsDH"))
　　count = count + 1
　　end if
　　%>
　　subcat[<%=count%>] = new Array("<%= trim(rsel("XjlsDH"))%>","<%= trim(rsel("JC"))%>","<%= trim(rsel("SH"))%>");
　　<%
　　count = count + 1
　　rsel.movenext
　　loop
　　rsel.close
　　%>
　　onecount2=<%=count%>;
　　
　　
　　function ChangeXjlsDH(locationid)
　　{
　　document.DQKSELECT.XjlsDH.length = 0;
　　var locationid=locationid;
　　var i;
　　for (i=0;i < onecount1; i++)
　　{
　　if (rootcat[i][0] == locationid)
　　{
　　document.DQKSELECT.XjlsDH.options[document.DQKSELECT.XjlsDH.length] = new Option(rootcat[i][1], rootcat[i][2]);
　　}
　　}
　　
　　}
　　
　　function ChangeSH(locationid)
　　{
　　document.DQKSELECT.SH.length = 0;
　　var locationid=locationid;
　　var i;
　　for (i=0;i < onecount2; i++)
　　{
　　if (subcat[i][0] == locationid)
　　{
　　document.DQKSELECT.SH.options[document.DQKSELECT.SH.length] = new Option(subcat[i][1], subcat[i][2]);
　　}
　　}
　　
　　}
　　ChangeXjlsDH(0)
　　ChangeSH(0)
　　</script>
　　<%
　　End Sub

*********************************************************************************************************************

*****************************************************************

这里是以省份和城市为例，由于用到数据库，请先建立数据库dlist.mdb

数据库名称：dlist.mdb

省份表名称：Province
字段有：p_id(类型:自动编号),p_name(类型：文本,省份名称）

城市表名称：City
字段有：c_id(类型:自动编号),c_pid(类型:文本,省份名称，等于Province表中的p_name）,c_name(类型：文本，城市名称）

源程序如下，保存为ASP文件即可执行。
------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS动态列表示例</title>
<script language="JavaScript"><!--
<%
dim conn,rs,grs,i,j,pstr,sstr
set conn=server.createobject("adodb.connection")
set rs=server.createobject("adodb.recordset")
set grs=server.createobject("adodb.recordset")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("dlist.mdb")
'写省份JS数组
rs.open "select * from province;",conn,1,1
pstr="var pstr=new Array("
for i=0 to rs.recordcount-1
if i<>rs.recordcount-1 then
pstr=pstr & "'" & rs("p_name") & "',"
else
pstr=pstr & "'" & rs("p_name") & "'"
end if
getsub(rs("p_name"))
rs.movenext
next
pstr=pstr & ");"
response.write pstr & vbcrlf
rs.close()
set rs=nothing
set grs=nothing

'根据省份写城市JS数组的过程
sub getsub(pname)
grs.open "select * from city where c_pid='" & pname & "';",conn,1,1
sstr="var sstr" & i & "=new Array("
for j=1 to grs.recordcount
  if j<>grs.recordcount then
   sstr=sstr & "'" & grs("c_name") & "',"
  else
   sstr=sstr & "'" & grs("c_name") & "'"
  end if
  grs.movenext
next
grs.close()
sstr=sstr & ");"
response.write sstr & vbcrlf
end sub
%>

//添加列表项目
//参数说明：FrmName-表单名、sName-要添加的列表名、sText-列表项显示的文本、sValue-列表项的值
function addOption(FrmName, sName, sText, sValue) {
var def = true;
var sel = true;
var optionName = new Option(sText, sValue, def, sel);
var length = FrmName[sName].length;
FrmName[sName].options[length] = optionName;
FrmName[sName].options[length].selected = false;
}

//删除列表项目
//参数说明：FrmName-表单名、sName-要删除的列表名、force-是否删除原来的项目(True删除，False保留)
function delOptions(FrmName, sName, force) {
var length = FrmName[sName].options.length;
for (var i=0; i<FrmName[sName].options.length; i++) {
    if (FrmName[sName].options[i].selected || force) {
      FrmName[sName].options[i] = null;
      length--;
      i--;
    }
}
}

//获得要添加列表项目的数组;
//参数说明：what-要获得选定值的列表
function getArrayValue(what) {
return eval(what.options[what.options.selectedIndex].value);
}

//根据当前选定值，添加列表项目
//参数说明：FrmName-表单名、sName1-要获取选定值的列表名、sName2-要动态加载的列表名
function updateOptions(FrmName, sName1, sName2) {
delOptions(FrmName,sName2,true);
var ArrayValue=getArrayValue(FrmName[sName1]);
for (var i=0; i<ArrayValue.length;i+=1) {
addOption(FrmName,sName2,ArrayValue[i],'sstr'+i);
}
FrmName[sName2].options.selectedIndex =0;//设置默认显示的列表项目
}

function GetValue(k){
alert(k);
}

//--></script>
</head>

<body onLoad="updateOptions(frmdlist, 'lsti', 'lstb');updateOptions(frmdlist, 'lstb', 'lsts')">
<p> </p>
<p> </p>
<p> </p>
<form action="" method="post" name="frmdlist" id="frmdlist">
<table width="408" border="0" align="center" cellpadding="2" cellspacing="2">
    <tr>
      <td width="400">JS动态列表示例<select name="lsti" style="display:none"><option value="pstr">pstr</select></td>
    </tr>
    <tr>
      <td><select style="width:200" name="lstb" id="lstb" onChange="updateOptions(this.form, 'lstb', 'lsts')">
      </select>
      <input type="button" name="Submit2" value="GetValue" onClick="GetValue(document.frmdlist.lstb.value)"></td>
    </tr>
    <tr>
      <td><select style="width:200" name="lsts" id="lsts">
      </select>
      <input type="button" name="Submit" value="GetValue" onClick="GetValue(document.frmdlist.lsts.value)"></td>
    </tr>
</table>
</form>
</body>
</html>