I do the amber Unlimited level classification linkage menu JavaScript version, in the Blue Ideal and csdn published a bit, the plum blossom snow brother in Csdn put forward the problem of inefficiency, I also recognize this, this plan is completed after the completion of the project, but a moment itched, then on the internet to look for information, Finally made this Ajax version of the Unlimited class linkage menu. Because time is hurried, do more rough, but already use Ajax technology, realize infinite level linkage, after some time to perfect this version.
Hope to provide you with some help, there are good suggestions or bugs can be in this post reply or browse http://www.51ajax.com/bbs/post.
Operating Environment: MS IE 6.0 FireFox 1.0.1
Download Address: Please click here
Online Demo: Please click here
Bug Feedback: Please click here
Last Updated: 2005-10-20 16:18
A total of two files:
The file ajax.html code is as follows:
<ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> <meta content=" amber [Hopesoft],[url]http://www.10090.com[/url] "name=" Author "> <title& GT, amber-infinite-level linkage menu [AJAX version]</title> <style type= "Text/css" > Body, td {Font-family: XXFarEastFont-Arial; font-size:12px; } </style> <script language= "JavaScript" > Function GetResult (str,classid) {/* *---------------GETR Esult (STR,CLASSID)-----------------* GetResult (STR) * Function: Sends the request through XMLHTTP, returns the result. * Parameters: str, string, send condition; classid, number, menu level * instance: GetResult (document.all.userid.value,1); *---------------GetResult (STR,CLASSID)-----------------///Define menu series, menu ID array, menu corresponding field array var Menuidarr,menufieldarr, Menuclass menuidarr= New Array () menufieldarr=new array () menuclass=4 menuidarr[1]= "Sel1" menuidarr[2]= "Sel2" Menui darr[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); Server-side processing returns a string that is encoded by escape. On the page display server query results var returntxt=unescape (Http_request.responsetext) if (returntxt.length>0) {document.all, Ajax.innerhtml= "Server returns results: <font color= ' Red ' >" +returntxt+ "</font> [Powered by AJAX]"} else {document.all, Ajax.innerhtml= ""}///returns data through XMLHTTP to begin building a select. Buildsel (Returntxt,eval ("document.all.") +MENUIDARR[CLASSID+1])//============ change below subordinate below menu is empty ============== 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) * Function: Build select through Str. * Parameter: STR, string, returned by the server. There is a specific structure "string 1|, String 2, String 3" * can also be "String 1 ordinal | String 1 text, String 2 ordinal number | String 2 text, string 3 ordinal number | String 3 text", as this example * parameter: SEL, to be constructed s Elect * Example: Buildsel (unescape (Obao.responsetext), Document.all.sel2) *---------------Buildsel (Str,sel)------------- ----///First clear the original data. sel.options.length=0; var arrstr = new Array (); Arrstr = Str.split (","); Start building a new select. Sel.options.add ("-----Please select-----", "")); if (str.length>0) {for (Var i=0;i<arrstr.length;i++) {//split string var subarrstr=new Array Subarrstr=arrstr[i].s Plit ("|") Generate subordinate menu Sel.options.add (new Option (subarrstr[1],subarrstr[0)); } sel.options[0].selected=true} </script> <form name= "Form1" method= "Post" action= "" > & Lt;table width= "90%" border= "0" align= "center" cellpadding= "2" cellspacing= "1" bgcolor= "#CCCCCC" > <tr bgcolor= "f1f1f1" > <td height= "" colspan= "2" align= "center" > Amber Unlimited Level linkage menu-ajax Edition [Hpmenu_ AJAX v1.0]</td> </tr> <tr bgcolor= "#FFFFFF" > <td width= "12%" Heigh t= "align=" "Center" >:</td> <td><select name= "Sel1" id= "Sel1" onchange= "GetResult" (Thi s.value,1) "> <option value=" "selected>-----Please select-----</option> <option val Ue= "Ten" > Asia </option> <option value= "One" > Europe </option> </select></td > </tr> <tr bgcolor= "#FFFFFF" > <td height= "align=" "Center" > Country :</td> <td><select name= "Sel2" onchange= "GetResult (this.value,2)" > <opti On value= "" selected>-----Please select-----</option> </select></td> </tr> <tr bgcolor= "#FFFFFF "> <td height=" align= "center" > City:</td> <td><select name= "Sel3" Id= "Sel3" onchange= "GetResult (this.value,3)" > <option value= "" selected>-----Please select-----</option > </select></td> </tr> <tr bgcolor= "#FFFFFF" > & LT;TD height= align= "center" > Area:</td> <td><select name= "Sel4" id= "Sel4" > <option value= "" selected>-----Please select-----</option> </select></td> ;/tr> <tr bgcolor= "f1f1f1" > <td height= "" colspan= "2" align= "center" id= "Ajax" >&N bsp;</td> </tr> </table> <table width= "90%" border= "0" align= " Center "cellpadding=" 0 "cellspacing=" 0 "> <tr> <td height=" "align=" Left "> Download address: Please click Here </td> </tr> <tr> <td height= "align=" "Left" > Online Demo: Click here </td> < /tr> <tr> <td height= "a" align= "left" >bug feedback: Please click here </td> </TR&G T <tr> <td height= "a" align= "left" > Last update: 2005-10-20 16:18</td> </tr> <tr> <td height= "align=" "left" > Contact way:msn:hopesoft@msn.com</td> </tr> <tr> <td height= align= "center" >copyright (c) Hopesoft Studio </td> </tr> </table> <script language= "JavaScript" > GetResult (document.gete Lementbyid ("Sel1"). value,1) </script> </form> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The file ajax_server.asp code is as follows:
<% @Language = "JavaScript"%> <% function opendb (sdbname) {/* *---------------opendb (sdbname)------------ -----* OPENDB (sdbname) * Function: Open database Sdbname, return conn object. * Parameters: Sdbname, String, database name. * Example: 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) {//traverse all the appropriate data into the Arrresult array. Arrresult[arrresult.length] = RS (0). Value+ "|" +rs (1). Value; Rs. MoveNext (); //escape resolved the XMLHTTP. Chinese to deal with the problem. Array group to synthesize strings. is connected by a string of ",". Response.Write (Arrresult.join (",")); %>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
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>
The above two versions of the program, is also a combination of many netizens wisdom, through my hand presented, the original intention of the Internet and the essence is to share, may this small program to bring you a little convenience.
