简介:
此文发表由冰河原创的:无刷新实现无限级联动菜单,由XMHTTP,JAVASCRIPT,ASP实现,看分为三个部分,文件 index.htm、文件 server.asp、 数据库 data.mdb
代码就数据库文档如下:
index.htm
'**************************************************
<!--
使用说明及注意事项:
假如有N级边动菜单.
javascript函数调用:
GetResult(objname ,nextallobj_str, str , nextobj)
参数说明:
objname : 当前变化的菜单名字(即name)
nextallobj_str : 当前变化菜单之后的所有菜单name的连接(中间用 "|" 连接)
str : 当前变化菜单的value值(此值当为数据库相关表中连接上下两级菜单的关键值)
nextobj : 当前菜单的下一个菜单对象
-->
<script language="JavaScript">
function GetResult(objname ,nextallobj_str, str , nextobj)
{
var yy = new Array();
yy = nextallobj_str.split("|");
for(var i=0 ; i<yy.length ; i++) clearoptions(eval("document.all."+yy[i])) ;
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
oBao.open("POST","Server.asp?"+objname+"="+str,false);
oBao.send();
BuildSel(unescape(oBao.responseText),nextobj)
}
function BuildSel(str,sel)
{
sel.options.length=0;
if (str!=""){
var Tarrstr = new Array();
Tarrstr = str.split("%$#@")
strid = Tarrstr[0]
strname = Tarrstr[1]
var arrstr1 = new Array();
arrstr1 = strid.split(",");
var arrstr2 = new Array();
arrstr2 = strname.split(","); //开始构建新的Select.
for(var i=0;i<arrstr1.length;i++)
{
sel.options[sel.options.length]=new Option(arrstr2[i],arrstr1[i])
}
}
var opobj = new Option("--请选择--", "")
sel.add(opobj,0)
sel.selectedIndex = 0
}
function clearoptions(obj){
for(var j = 0 ; j<=obj.length ; j++)obj.remove(0)
var opobj = new Option("--请选择--", "")
obj.add(opobj,0)
obj.selectedIndex = 0
}
</script>
<select name="sel1" onChange="GetResult(this.name,'sel2|sel3|sel4|sel5' ,this.value,document.all.sel2)">
<option value="">请选择</option>
<option value="1">福建省</option>
<option value="2">湖北省</option>
<option value="3">辽宁省</option>
<select>
<select name="sel2" onChange="GetResult(this.name,'sel3|sel4|sel5' ,this.value,document.all.sel3)" >
<option value="">--请选择--</option>
</select>
<select name="sel3" onChange="GetResult(this.name, 'sel4|sel5',this.value,document.all.sel4)">
<option value="">--请选择--</option>
</select>
<select name="sel4" onChange="GetResult(this.name,'sel5' , this.value,document.all.sel5)" >
<option value="">--请选择--</option>
</select>
<select name="sel5">
<option value="">--请选择--</option>
</select>
'**************************************************
server.asp
'**************************************************
<%
''''' show_backstr 函数说明 (举例:城市表(city)字段: id (PK), belong_id (所属省份的ID号) , city(城市名称))
''' 参数 colname_id : 即为 id (作为下一级菜单关联的ID值)
'' 参数 colname_name : 即为 city (注意此为字段名)
'' 参数 table_name : 即为 city (注意此为表名)
'' 参数 parentcol : 即为 belong_id (所属父类ID号字段名)
'' 参数 belongparent : 即为 sel1 (Request过来的值)
'' 返回值 escape加密后的值(形如将 id1,id+"2%$#@"+name1+name2 加密), 因此客户端得到此值后要解密.
dim conn
set conn=Server.CreateObject("ADODB.Connection")
sub OpenDB(sdbname)
connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="&Server.MapPath(sdbname)
conn.Open(connstr)
end sub
OpenDB("data.mdb")
'''传过来的四个菜单名字
dim sel1 , sel2 , sel3 , sel4
sel1 = Request("sel1")
sel2 = Request("sel2")
sel3 = Request("sel3")
sel4 = Request("sel4")
if sel1<>"" then call show_backstr("id","city","city","belong_id",sel1)
if sel2<>"" then call show_backstr("id","smallcity","smallcity","belong_id",sel2)
if sel3<>"" then call show_backstr("id","node","node","belong_id",sel3)
if sel4<>"" then call show_backstr("id","device","device","belong_id",sel4)
sub show_backstr( colname_id,colname_name, table_name , parentcol , belongparent )
dim arrResult
if belongparent = "" or not isNumeric(belongparent) then
response.write escape("")
exit sub
end if
sql = "select "& colname_id & "," & colname_name & " from " & table_name & " where " & parentcol & "="+belongparent+""
set rs = Server.CreateObject("ADODB.Recordset")
rs.Open sql,Conn,1,1
do until rs.EOF
arrResult_id = arrResult_id & rs(colname_id)&","
arrResult_name = arrResult_name & rs(colname_name)&","
rs.MoveNext()
loop
if arrResult_id <> "" then arrResult_id = left(arrResult_id , len(arrResult_id)-1)
if arrResult_name <> "" then
arrResult_name = left(arrResult_name , len(arrResult_name)-1)
Response.Write(escape(arrResult_id&"%$#@"&arrResult_name))
end if
end sub
set conn = Nothing
%>
'**************************************************
data.mdb 数据库说明(ACCESS)
'**************************************************
' 数据库说明:
' 表1: province (省)
' 字段名 类型
' id int
' province varchar(30)
' ---如下的每个表的belong_id都是关联上表的id---
' 表2: city (市)
' id int
' belong_id int
' city varchar(50)
'
' 表3: smallcity (县)
' id int
' belong_id int
' smallcity varchat(50)
'
'
' 表4: node (节点 县下面的)
' id int
' belong_id int
' smallcity varchat(50)
'
' 表5: device (节点下面的设备)
' id int
' belong_id int
' device varchat(50)
'**************************************************
作者:步步为赢:冰河 摘自:http://www.winsteps.net