我做好琥珀無限級分類聯動菜單Javascript版後，在藍色理想和CSDN上發表了一下，梅花雪兄在CSDN上提出了效率不足的問題，我也認識到了這一點，本打算項目完工後再進行完善，但一時技癢，便在網上尋找了一下資料，最後做出了此AJAX版無限級分類聯動菜單。因時間匆忙，做得比較粗糙，但已利用AJAX技術，實現無限級聯動，待過一段時間再完善此版本。
希望能給大家提供一些協助，有好的建議或bug可在此帖後回複或瀏覽http://www.51ajax.com/bbs/發帖。
運行環境：MS IE 6.0 FireFox 1.0.1
下載地址：請點擊這裡
線上Demo：請點擊這裡
Bug 反饋：請點擊這裡
最後更新：2005-10-20 16:18
共有兩個檔案：
檔案ajax.html代碼如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta content="琥珀[hopesoft],[url]http://www.10090.com[/url]" name="author"> <title>琥珀網 - 無限級聯動菜單[AJAX版]</title> <style type="text/css"> body, td { font-family: 宋體; font-size: 12px; } </style> <script language="JavaScript"> function GetResult(str,classid) { /* *--------------- GetResult(str,classid) ----------------- * GetResult(str) * 功能:通過XMLHTTP發送請求,返回結果. * 參數:str,字串,發送條件;classid,數字,菜單層級 * 執行個體:GetResult(document.all.userid.value,1); *--------------- GetResult(str,classid) ----------------- */ //定義菜單級數，菜單ID數組，菜單對應欄位數組 var MenuIdArr,MenuFieldArr,MenuClass MenuIdArr= new Array() MenuFieldArr=new Array() MenuClass=4 MenuIdArr[1]="sel1" MenuIdArr[2]="sel2" MenuIdArr[3]="sel3" MenuIdArr[4]="sel4" MenuFieldArr[1]="name" MenuFieldArr[2]="name" MenuFieldArr[3]="name" MenuFieldArr[4]="name" if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP"); } var linkurl="http://www.10090.com/demo/hpmenu/ajax_server.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> [Powered by AJAX]"} else {document.all,ajax.innerHTML=""} //通過XMLHTTP返回資料,開始構建Select. BuildSel(returntxt,eval("document.all."+MenuIdArr[classid+1])) //============更改下下級以下菜單為空白============== var kkk for(kkk=classid+2;kkk<=MenuClass;kkk++) { submenu=eval("document.all."+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 Array subarrstr=arrstr[i].split("|") //產生下級菜單 sel.options.add(new Option(subarrstr[1],subarrstr[0])); } sel.options[0].selected=true } } </script> <form name="form1" method="post" action=""> <table width="90%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC"> <tr bgcolor="F1F1F1"> <td height="24" colspan="2" align="center">琥珀無限級聯動菜單-AJAX版 [HPMenu_AJAX V1.0]</td> </tr> <tr bgcolor="#FFFFFF"> <td width="12%" height="24" align="center">所 在 洲:</td> <td><select name="sel1" id="sel1" onChange="GetResult(this.value,1)"> <option value="" selected>-----請選擇-----</option> <option value="10">亞洲</option> <option value="11">歐洲</option> </select></td> </tr> <tr bgcolor="#FFFFFF"> <td height="24" align="center">國 家:</td> <td><select name="sel2" onChange="GetResult(this.value,2)"> <option value="" selected>-----請選擇-----</option> </select></td> </tr> <tr bgcolor="#FFFFFF"> <td height="24" align="center">城 市:</td> <td><select name="sel3" id="sel3" onChange="GetResult(this.value,3)"> <option value="" selected>-----請選擇-----</option> </select></td> </tr> <tr bgcolor="#FFFFFF"> <td height="24" align="center">地 區:</td> <td><select name="sel4" id="sel4"> <option value="" selected>-----請選擇-----</option> </select></td> </tr> <tr bgcolor="F1F1F1"> <td height="24" colspan="2" align="center" id="ajax"> </td> </tr> </table> <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="25" align="left">下載地址：請點擊這裡</td> </tr> <tr> <td height="25" align="left">線上Demo：請點擊這裡</td> </tr> <tr> <td height="25" align="left">Bug 反饋：請點擊這裡</td> </tr> <tr> <td height="25" align="left">最後更新：2005-10-20 16:18</td> </tr> <tr> <td height="25" align="left">連絡方式：MSN:hopesoft@msn.com</td> </tr> <tr> <td height="50" align="center">copyright(c) 2005 Hopesoft Studio </td> </tr> </table> <script language="javascript"> GetResult(document.getElementById("sel1").value,1) </script> </form> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
檔案ajax_server.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("ajax_data.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+"'"; //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(","))); %>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
以上兩個版本的程式，也是揉合了眾多網友的智慧，經我之手呈現出來，互連網的初衷與精髓就在於分享，願這個小程式能給您帶來些許方便。
