熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> .NET編程 >> 正文

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

2013-11-13 10:12:33  來源: .NET編程 

  <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>&nbsp;</td>
          </tr>
   </table>
     <br>
     <table width=%  border= align=center cellpadding= cellspacing=>
          <tr>
            <td height= align=left>&nbsp;</td>
          </tr>
          <tr>
            <td height= align=left>&nbsp;</td>
          </tr>
          <tr>
            <td height= align=left>&nbsp;</td>
          </tr>
          <tr>
            <td height= align=left>&nbsp;</td>
          </tr>
          <tr>
            <td height= align=left>&nbsp;</td>
          </tr>
          <tr>
            <td height= align=center>&nbsp;</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
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.