琥珀無限級聯(lián)動菜單-JavaScript版

更新時間：2006年11月16日 00:00:00 作者：

<html>    <head>      <meta http-equiv="Content-Type" content="text/html; charset=gb2312">      <meta content="琥珀[hopesoft],http://www.51ajaxcom" name="author">      <title>琥珀網(wǎng) - javascript無限級聯(lián)動菜單</title>      <style type="text/css">      body, td      {        font-family: 宋體;        font-size: 12px;      }      </style>  <script language="javascript">  /*---------------------------------------------------------------------------*\  |  Subject:       JavaScript三級聯(lián)動菜單                                      |  |  Version:       1.0                                                         |  |  Author:        琥珀【hopesoft】                                            |  |  FileName:      HPMenu.js                                                   |  |  Created:       2005-10-16                                                  |  |  LastModified:  2005-10-16                                                  |  |  Download:      http://www.10090.com/Demo/hpmenu/HPMenu.rar                      |  |  Explain:       http://www.10090.com/Demo/                                  |  |  Demo:          http://www.10090.com/Demo/                                  |  |                                                                             |  |                                                                             |  |-----------------------------------------------------------------------------|  |  MSN: hopesoft at msn.com   http://www.51ajax.com/bbs/                |  |                       Copyright (c) 2004-2005 HopeSoftStudio                |  \*---------------------------------------------------------------------------*/  function  Menu(theform,menuid) {  /*---------------------------------------------------------------------------*\  *                     1.變量定義　　　　　　　　　　　　　　　　　　　　　　 *  /*---------------------------------------------------------------------------*/　　　　　  //定義菜單級別MenuClass,菜單長度數(shù)組MenuLenArr,  //菜單名稱數(shù)組MenuArr,下級菜單數(shù)組SubMenuArr，菜單ID數(shù)組MenuIdArr  var MenuClass,MenuLenArr,MenuArr,SubMenuArr,MenuIdArr  //定義分隔符：splitchar1,splitchar2  var splitchar1,splitchar2  //定義臨時數(shù)組,子數(shù)組,數(shù)組長度,  var arr,subarr,arrlen  /*---------------------------------------------------------------------------*\  *                     2.變量賦值　　　　　　　　　　　　　　　　　　　　　　 *  /*---------------------------------------------------------------------------*/  MenuArr=new Array()  MenuLenArr=new Array()  SubMenuArr=new Array()  MenuIdArr=new Array()  MenuArr[1]="歐洲|||亞洲|||非洲|||大洋洲|||北美洲|||南美洲"                              //洲名|||...  MenuArr[2]="歐洲###德國|||歐洲###法國|||北美洲###美國|||北美洲###加拿大|||亞洲###中國|||非洲###埃及|||大洋洲###澳大利亞|||南美洲###墨西哥"  //洲名###國名|||...  MenuArr[3]="中國###北京|||中國###上海|||美國###華盛頓|||美國###紐約|||德國###柏林|||法國###巴黎|||加拿大###多倫多|||埃及###開羅|||澳大利亞###悉尼|||墨西哥###墨西哥城"      //國名###城市名|||...  MenuArr[4]="北京###朝陽區(qū)|||上海###徐匯區(qū)|||廣州###天河區(qū)|||紐約###曼哈頓區(qū)|||華盛頓###華盛頓區(qū)|||柏林###新柏林區(qū)|||巴黎###大巴黎區(qū)|||開羅###大開羅|||悉尼###悉尼市區(qū)|||墨西哥城###墨西哥城區(qū)"      //國名###城市名|||...  MenuIdArr[1]="zhou"  MenuIdArr[2]="guo"  MenuIdArr[3]="shi"  MenuIdArr[4]="qu"  MenuClass=4  //4級菜單  splitchar1="|||";  splitchar2="###";  /*---------------------------------------------------------------------------*\  *                     3.生成數(shù)組　　　　　　　　　　　　　　　　　　　　　　 *  /*---------------------------------------------------------------------------*/  for(iii=1;iii<=MenuClass;iii++)  {  arr=MenuArr[iii].split(splitchar1);  len=arr.length;  subarr=new Array()  for (i=0;i<len;i++)  {    subarr[i]=arr[i].split(splitchar2);  }  len=subarr.length;  SubMenuArr[iii]=subarr   MenuLenArr[iii]=len  }  //============更改下級菜單======================  var self,submenu,thislen,thisarr      //self本級菜單  //submenu子菜單  //theform:所在表單對象[type:object]  //menuid:本級菜單級別ID，如1級菜單則為1      self=eval("document."+theform.name+"."+MenuIdArr[menuid])          submenu=eval("document."+theform.name+"."+MenuIdArr[menuid+1])          thislen=MenuLenArr[menuid+1]      thisarr=SubMenuArr[menuid+1]      submenu.length=0      submenu.options.add(new Option( "-----請選擇-----",""));             for  (i=0;i<thislen;i++)          {           if  (thisarr[i][0]  ==  self.value)           {           submenu.options.add(new Option(thisarr[i][1],  thisarr[i][1]));              }            }         submenu.options[0].selected=true  //============更改下級以下菜單==============  var kkk  for(kkk=menuid+2;kkk<=MenuClass;kkk++)      {              submenu=eval("document."+theform.name+"."+MenuIdArr[kkk])          submenu.length=0      submenu.options.add(new Option( "-----請選擇-----",""));               submenu.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">琥珀無限級聯(lián)動菜單-JavaScript版 [HPMenu V1.0]</td>            </tr>            <tr bgcolor="#FFFFFF">              <td width="12%" height="24" align="center">所 在 洲:</td>              <td><select name="zhou" id="zhou" onChange="Menu(this.form,1);">                  <option value="" selected>-----請選擇-----</option>                  <option value='歐洲'>歐洲</option>                  <option value='亞洲'>亞洲</option>                  <option value='非洲'>非洲</option>                  <option value='大洋洲'>大洋洲</option>                  <option value='北美洲'>北美洲</option>                  <option value='南美洲'>南美洲</option>              </select></td>            </tr>            <tr bgcolor="#FFFFFF">              <td height="24" align="center">國　　家:</td>              <td><select name="guo" id="select" onChange="Menu(this.form,2);">                <option value="" selected>-----請選擇-----</option>              </select></td>            </tr>            <tr bgcolor="#FFFFFF">              <td height="24" align="center">城　　市:</td>              <td><select name="shi" id="select2" onChange="Menu(this.form,3);">                <option value="" selected>-----請選擇-----</option>              </select></td>            </tr>            <tr bgcolor="#FFFFFF">              <td height="24" align="center">地　　區(qū):</td>              <td><select name="qu" id="select3">                <option value="" selected>-----請選擇-----</option>              </select></td>            </tr>            <tr bgcolor="F1F1F1">              <td height="24" colspan="2" align="center">&nbsp;</td>            </tr>        </table>                    <table width="90%"  border="0" align="center" cellpadding="0" cellspacing="0">            <tr>              <td height="25" align="left">下載地址：<a  target="_blank">請點擊這里</a></td>            </tr>            <tr>              <td height="25" align="left">在線Demo：<a  target="_blank">請點擊這里</a></td>            </tr>            <tr>              <td height="25" align="left">Bug 反饋：<a  target="_blank">請點擊這里</a></td>            </tr>            <tr>              <td height="25" align="left">聯(lián)系方式：MSN:hopesoft@msn.com</td>            </tr>            <tr>              <td height="25" align="left">&nbsp;</td>            </tr>            <tr>              <td height="50" align="center">copyright(c) 2005 <a >Hopesoft Studio</a> </td>            </tr>          </table>          <script language="javascript">                          Menu(eval("document.form1"),1)        </script>  </form>  </body>  </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

琥珀無限級聯(lián)動菜單-JavaScript版

JavaScript實現(xiàn)兩個select下拉框選項左移右移
這篇文章主要介紹了JavaScript實現(xiàn)兩個select下拉框選項左移右移功能，js實現(xiàn)下拉框元素互相移動，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
ES6擴展運算符的使用方法示例
es6新增加了一個運算符,叫做擴展運算符,這個運算符用在數(shù)組前面,會把數(shù)組展開變成各個獨立的值,這篇文章主要給大家介紹了關于ES6擴展運算符的相關資料,需要的朋友可以參考下
2021-07-07
JavaScript 里的類數(shù)組對象
這篇文章主要介紹了JavaScript 里的類數(shù)組對象的相關資料,需要的朋友可以參考下
2015-04-04
js+css完成網(wǎng)站的會員照片信息顯示效果
js+css完成網(wǎng)站的經(jīng)典效果，一般用于會員排行榜中，會員信息的介紹，包括照片等。
2010-06-06
js實現(xiàn)圖片上傳即時顯示效果
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片上傳即時顯示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
Bootstrap一款超好用的前端框架
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，用于開發(fā)響應式布局、移動設備優(yōu)先的 WEB 項目。接下來通過本文給大家分享Bootstrap一款超好用的前端框架，感興趣的朋友一起看看吧
2017-09-09
echarts實現(xiàn)3d柱狀圖的2種方式舉例
echarts3D效果柱狀圖的實現(xiàn),這個太難了,我花了兩天終于調(diào)成我想要的效果啦,要是官網(wǎng)上有例子就好了,太難調(diào)了,下面這篇文章主要給大家介紹了關于echarts實現(xiàn)3d柱狀圖的2種方式,需要的朋友可以參考下
2023-02-02
微信小程序tabBar底部導航中文注解api詳解
這篇文章主要為大家詳細介紹了微信小程序tabBar底部導航中文注解api，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
JavaScript中遍歷跳出循環(huán)方法總結
這篇文章主要給大家介紹了關于JavaScript中遍歷跳出循環(huán)方法的相關資料,一想到想到循環(huán)的跳出,立馬就會想到三個關鍵,break、return、continue,在業(yè)務中也會需要在遍歷的時候退出循環(huán),需要的朋友可以參考下
2023-12-12
require.js的用法詳解
本文給大家介紹require.js的用法，require.js的誕生是為了解決兩大問題，第一實現(xiàn)js文件的異步加載，避免網(wǎng)頁失去響應，第二管理模塊之間的依賴性，便于代碼的編寫和維護，對require.js用法感興趣的朋友可以參考下本篇文章
2015-10-10