无刷新实现无限级联动菜单(转贴)

简介：

此文发表由冰河原创的：无刷新实现无限级联动菜单，由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