<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无限级联动菜单</title> <style type="text/css"> body, td { font-family: 宋体; font-size: 12px; } </style><script language="JavaScript">function GetResult(str,classid){alert(str);/**--------------- GetResult(str,classid) -----------------* GetResult(str) * 功能:通过XMLHTTP发送请求,返回结果.* 参数:str,字符串,发送条件;classid,数字,菜单级别* 实例:GetResult(document.all.userid.value,1);*--------------- GetResult(str,classid) -----------------*///定义菜单级数，菜单ID数组，菜单对应字段数组var MenuIdArr,MenuFieldArr,MenuClassMenuIdArr= new Array()MenuFieldArr=new Array()MenuClass=3
MenuIdArr[1]="sel1"MenuIdArr[2]="sel2"MenuIdArr[3]="sel3"
MenuFieldArr[1]="name"MenuFieldArr[2]="name"MenuFieldArr[3]="name"
if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest();} else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP");}
var linkurl="linkdata.asp?classid="+classid+"&sel="+str+"&fieldname="+MenuFieldArr[classid+1]http_request.open("GET",linkurl,false);http_request.send(null);
//服务器端处理返回的是经过escape编码的字符串.//在页面显示服务器查询结果
var returntxt=unescape(http_request.responseText)//if(returntxt.length>0)//{document.all,ajax.innerHTML="服务器返回结果：<font color='red'>"+returntxt+"</font>"}//else//{document.all,ajax.innerHTML=""}
//通过XMLHTTP返回数据,开始构建Select.//BuildSel(returntxt,eval("document.all."+MenuIdArr[classid+1]))BuildSel(returntxt,document.getElementById(MenuIdArr[classid+1]))
//============更改下下级以下菜单为空==============var kkkfor(kkk=classid+2;kkk<=MenuClass;kkk++) { submenu=document.getElementById(MenuIdArr[kkk]) submenu.length=1 submenu.options[0].selected=true }}
function BuildSel(str,sel){/**--------------- BuildSel(str,sel) -----------------* BuildSel(str,sel) * 功能:通过str构建Select.* 参数:str,字符串,由服务端返回的.有特定结构"字符串1|,字符串2,字符串3"* 也可为"字符串1序号|字符串1文本,字符串2序号|字符串2文本,字符串3序号|字符串3文本",如本例* 参数:sel,要构建的Select* 实例:BuildSel(unescape(oBao.responseText),document.all.sel2)*--------------- BuildSel(str,sel) -----------------*///先清空原来的数据.sel.options.length=0;var arrstr = new Array();arrstr = str.split(",");//开始构建新的Select.sel.options.add(new Option( "请选择","")); if(str.length>0) {for(var i=0;i<arrstr.length;i++){//分割字符串var subarrstr=new Arraysubarrstr=arrstr[i].split("|")//生成下级菜单sel.options.add(new Option(subarrstr[1],subarrstr[0])); }sel.options[0].selected=true}
}</script>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><select type=hidden name="sel1" id="sel1" onChange="GetResult(this.value,1)"> <option value="">请选择</option> <option value="8">安徽省</option> </select><select name="sel2" id="sel2" onChange="GetResult(this.value,2)"> <option value="">请选择</option> </select><select name="sel3" id="sel3"> <option value="">请选择</option> </select></td> </tr> <tr> <td height="24" align="center" id="ajax"> </td> </tr> </table><script language="javascript"> GetResult(document.getElementById("sel1").value,1) </script>
</body></html>
linkdata.asp
<% @Language="JavaScript" %><%function OpenDB(sdbname){/**--------------- OpenDB(sdbname) -----------------* OpenDB(sdbname) * 功能:打开数据库sdbname,返回conn对象.* 参数:sdbname,字符串,数据库名称.* 实例:var conn = OpenDB("database.mdb");*--------------- OpenDB(sdbname) -----------------*/var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);var conn = Server.CreateObject("ADODB.Connection");conn.Open(connstr);return conn;}var oConn = OpenDB("city.mdb");var sel = Request("sel");var classid = Request("classid")var fieldname = Request("fieldname")var arrResult = new Array();//var sql = "select "+fieldname+" from Demo where parentid='"+sel+"' and classid="+classid;var sql = "select id,"+fieldname+" from Demo where parentid='"+sel+"' order by orderid";//Response.Write("alert("+sql+")")var rs = Server.CreateObject("ADODB.Recordset");rs.Open(sql,oConn,1,1);while(!rs.EOF){//遍历所有适合的数据放入arrResult数组中.arrResult[arrResult.length] = rs(0).Value+"|"+rs(1).Value;rs.MoveNext();}//escape解决了XMLHTTP。中文处理的问题.//数组组合成字符串.由","字符串连接.Response.Write(escape(arrResult.join(",")));%>
