AJAX實現無限級聯動菜單效果

　　<html>
<head>
    <meta httpequiv=ContentType content=text/html; charset=gb>powered by
    <meta content=琥珀[hopesoft] name=author>
    <title>琥珀網無限級聯動菜單[AJAX版]</title>
    <style type=text/css>
    body td
    {
      fontfamily: 宋體;
      fontsize: px;
    }
    </style>
<script language=JavaScript>
function GetResult(strclassid)
{
/*
* GetResult(strclassid)
* GetResult(str)
* 功能:通過XMLHTTP發送請求返回結果
* 參數:str字符串發送條件;classid數字菜單級別
* 實例:GetResult(documentalluseridvalue);
* GetResult(strclassid)
*/
//定義菜單級數菜單ID數組菜單對應字段數組
var MenuIdArrMenuFieldArrMenuClass
MenuIdArr= new Array()
MenuFieldArr=new Array()
MenuClass=

　　MenuIdArr[]=sel
MenuIdArr[]=sel
MenuIdArr[]=sel
MenuIdArr[]=sel

　　MenuFieldArr[]=name
MenuFieldArr[]=name
MenuFieldArr[]=name
MenuFieldArr[]=name

　　if (windowXMLHttpRequest) { // Mozilla Safari
http_request = new XMLHttpRequest();
} else if (windowActiveXObject) { // IE
http_request = new ActiveXObject(MicrosoftXMLHTTP);
}

　　var linkurl=ajax_serverasp?classid=+classid+&sel=+str+&fieldname=+MenuFieldArr[classid+]
(GETlinkurlfalse);
(null);

　　//服務器端處理返回的是經過escape編碼的字符串
//在頁面顯示服務器查詢結果

　　var returntxt=unescape()
if(returntxtlength>)
{documentallajaxinnerHTML=服務器返回結果<font color=red>+returntxt+</font> [Powered by AJAX]}
else
{documentallajaxinnerHTML=}

　　//通過XMLHTTP返回數據開始構建Select
//BuildSel(returntxteval(documentall+MenuIdArr[classid+]))
BuildSel(returntxtdocumentgetElementById(MenuIdArr[classid+]))

　　//============更改下下級以下菜單為空==============
var kkk
for(kkk=classid+;kkk<=MenuClass;kkk++)
{
submenu=documentgetElementById(MenuIdArr[kkk])
submenulength=
submenuoptions[]selected=true
}
}

　　function BuildSel(strsel)
{
/*
* BuildSel(strsel)
* BuildSel(strsel)
* 功能:通過str構建Select
* 參數:str字符串由服務端返回的有特定結構字符串|字符串字符串
* 也可為字符串序號|字符串文本字符串序號|字符串文本字符串序號|字符串文本如本例
* 參數:sel要構建的Select
* 實例:BuildSel(unescape(oBaoresponseText)documentallsel)
* BuildSel(strsel)
*/
//先清空原來的數據
seloptionslength=;
var arrstr = new Array();
arrstr = strsplit();
//開始構建新的Select
seloptionsadd(new Option( 請選擇));
if(strlength>)
{
for(var i=;i<arrstrlength;i++)
{
//分割字符串
var subarrstr=new Array
subarrstr=arrstr[i]split(|)
//生成下級菜單
seloptionsadd(new Option(subarrstr[]subarrstr[]));
}
seloptions[]selected=true
}

　　}
</script>

　　<form name=form method=post action=>
        <table width=% border= align=center cellpadding= cellspacing= bgcolor=#CCCCCC>
          <tr bgcolor=FFF>
            <td height= colspan= align=center>琥珀無限級聯動菜單AJAX版 [HPMenu_AJAX V]</td>
          </tr>
          <tr bgcolor=#FFFFFF>
            <td width=% height= align=center>所在洲:</td>
            <td><select name=sel id=sel onChange=GetResult(thisvalue)>
               <option value= selected>請選擇</option>
              <option value=>亞洲</option>
              <option value=>歐洲</option>
            </select></td>
          </tr>
          <tr bgcolor=#FFFFFF>
            <td height= align=center>國　　家:</td>
            <td><select name=sel id=sel onChange=GetResult(thisvalue)>
               <option value= selected>請選擇</option>
            </select></td>
          </tr>
          <tr bgcolor=#FFFFFF>
            <td height= align=center>城　　市:</td>
            <td><select name=sel id=sel onChange=GetResult(thisvalue)>
               <option value= selected>請選擇</option>
            </select></td>
          </tr>
          <tr bgcolor=#FFFFFF>
            <td height= align=center>地　　區:</td>
            <td><select name=sel id=sel>
               <option value= selected>請選擇</option>
            </select></td>
          </tr>
          <tr bgcolor=FFF>
            <td height= colspan= align=center id=ajax> </td>
          </tr>
   </table>
     <br>
     <table width=% border= align=center cellpadding= cellspacing=>
          <tr>
            <td height= align=left> </td>
          </tr>
          <tr>
            <td height= align=left> </td>
          </tr>
          <tr>
            <td height= align=left> </td>
          </tr>
          <tr>
            <td height= align=left> </td>
          </tr>
          <tr>
            <td height= align=left> </td>
          </tr>
          <tr>
            <td height= align=center> </td>
          </tr>
        </table>
        <script language=javascript>
  GetResult(documentgetElementById(sel)value)
        </script>
</form>
</body>
</html>

From:http://tw.wingwit.com/Article/program/net/201311/12909.html