DANCE WITH JAVA

          開發出高質量的系統

          常用鏈接

          統計

          積分與排名

          好友之家

          最新評論

          javascript 關聯列表的實現(簡單的和復雜的)

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <HEAD>
          <TITLE> 動態刷新實例 </TITLE>
          <META NAME="Generator" CONTENT="EditPlus">
          <META NAME="Author" CONTENT="wangrw">
          <META NAME="Description" CONTENT="一個動態刷新的實例">
          </HEAD>
          <script language="JavaScript" type="text/JavaScript" >
              
          /* 用來保存所有下拉條中的數據*/
              
          var vMainMenus = new Array();

              
          /**
              * 初始化各菜單項,及初始化主菜單和相應的子菜單項
              * 這個函數的內容可以方便的由服務器端程序生成。
              *
              
          */

              
          function initList(){
                  
          var i = 0;
                  
          var j = 0;
                  
          // 產生一個新的子菜單數組
                  var subs = new Array();
                  
          // 子菜單的第一個元素是主菜單的標題
                  subs[j++= "---";
                  
          // 子菜單的選項是從第二個元素,即 index = 2 開始的
                  subs[j++= "---";
                  
          // 將子菜單添加第主菜單中
                  vMainMenus[i++= subs;

                  
          // 重新產生一個新的子菜單數組
                  var subs = new Array();
                  j
          =0;
                  subs[j
          ++= "Java";
                  subs[j
          ++= "Java 基礎知識";
                  subs[j
          ++= "Java GUI 設計";
                  subs[j
          ++= "Java 企業級設計";
                  subs[j
          ++= "Java 嵌入式設計";
                  vMainMenus[i
          ++= subs;

                  
          // 重新產生一個新的子菜單數組
                  subs = new Array();
                  j 
          = 0;
                  subs[j
          ++= "C/C++";
                  subs[j
          ++= "C/C++ 基礎";
                  subs[j
          ++= "C++ STL";
                  subs[j
          ++= "Visual C++";
                  subs[j
          ++= "C++ Builder";
                  vMainMenus[i
          ++= subs;
                  
                  
          // 重新產生一個新的子菜單數組
                  subs = new Array();
                  j 
          = 0;
                  subs[j
          ++= "Scripts";
                  subs[j
          ++= "JavaScript/JScript";
                  subs[j
          ++= "VBScript";
                  subs[j
          ++= "Perl";
                  vMainMenus[i
          ++= subs;
              }

              
          /**
              * 初始化主菜單
              *
              * @param mainList 主菜單列表框
              
          */

              
          function initMainList(mainList){
                  
          for (i = 0; i < vMainMenus.length; ++i) {
                      mainList.options[i] 
          = new Option(vMainMenus[i][0], i);
                  }

              }

              
          /*
              * 初始化子菜單
              *
              * @param mainList 主菜單列表框
              * @param subList 子菜單列表框
              
          */

              
          function initSubList(mainList,subList){
                  
          var idx = mainList.selectedIndex;
                  
          var subs = vMainMenus[idx];
                  subList.length 
          = 0;
                  
          for (var i = 0, j = 1; j < subs.length; ++i, ++j) {
                      subList.options[i] 
          = new Option(subs[j], i);
                  }

              }

              
          /**
              * 初始化
              *
              * @param mainList 主菜單列表框
              * @param subList 子菜單列表框
              
          */

              
          function load(mainList,subList){
                  initList();
                  initMainList(mainList);
                  initSubList(mainList,subList);
              }


          </script>
          <BODY>
              
          <form action="" method="post" name="formLists" id="formLists">
                  
          <!-- 當主菜單的選擇改變時,調用 initSubList(MainList, subList) 函數,并傳入正確參數 -->
                  
          <select name="mainMenu" id="mainMenu" onChange="initSubList(this, this.form.subMenus);">
                  
          </select>
                  
          <select name="subMenus" id="subMenus">
                  
          </select>
              
          </form>
              
          <script language="JavaScript" type="text/JavaScript">
                  
          // 調用 load 進行初始化
                  load(document.all.formLists.mainMenu, document.all.formLists.subMenus);
              
          </script>
              這個是簡單的列表,用于select中“顯示內容”和“value值
          "相等的情況,不相等的見下一個例子
          </BODY>
          </HTML>

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <HEAD>
          <TITLE> 動態刷新實例 </TITLE>
          <META NAME="Generator" CONTENT="EditPlus">
          <META NAME="Author" CONTENT="wangrw">
          <META NAME="Description" CONTENT="一個動態刷新的實例">
          </HEAD>
          <script language="JavaScript" type="text/JavaScript" >

              
          /**
              * 使用這樣的字符串"Id:Name"(另外的解決辦法是定義一個對象來作為數組的元素)
              
          */


              
          /* 用來保存所有下拉條中的數據*/
              
          var vMainMenus = new Array();

              
          /**
              * 初始化各菜單項,及初始化主菜單和相應的子菜單項
              * 這個函數的內容可以方便的由服務器端程序生成。
              *
              
          */

              
          function initList(){
                  
          var i = 0;
                  
          var j = 0;
                  
          // 產生一個新的子菜單數組
                  var subs = new Array();
                  
          // 子菜單的第一個元素是主菜單的標題
                  subs[j++= "---:null";
                  
          // 子菜單的選項是從第二個元素,即 index = 2 開始的
                  subs[j++= "---:null";
                  
          // 將子菜單添加第主菜單中
                  vMainMenus[i++= subs;

                  
          // 重新產生一個新的子菜單數組
                  var subs = new Array();
                  j
          =0;
                  subs[j
          ++= "中國:zhongguo";
                  subs[j
          ++= "---:null";
                  subs[j
          ++= "北京:beijing";
                  subs[j
          ++= "天津:tianjin";
                  subs[j
          ++= "上海:shanghai";
                  subs[j
          ++= "大連:dalian";
                  vMainMenus[i
          ++= subs;

                  
          // 重新產生一個新的子菜單數組
                  subs = new Array();
                  j 
          = 0;
                  subs[j
          ++= "美國:meiguo";
                  subs[j
          ++= "---:null";
                  subs[j
          ++= "紐約:niuyue";
                  subs[j
          ++= "加州:jiazhou";
                  subs[j
          ++= "華盛頓:huashengdun";
                  subs[j
          ++= "西雅圖:xiyatu";
                  vMainMenus[i
          ++= subs;
                  
                  
          // 重新產生一個新的子菜單數組
                  subs = new Array();
                  j 
          = 0;
                  subs[j
          ++= "歐共體:ougongti";
                  subs[j
          ++= "---:null";
                  subs[j
          ++= "英國:yingguo";
                  subs[j
          ++= "法國:faguo";
                  subs[j
          ++= "德國:deguo";
                  vMainMenus[i
          ++= subs;
              }

              
          /**
              * 初始化主菜單
              *
              * @param mainList 主菜單列表框
              
          */

              
          function initMainList(mainList){
                  
          for (i = 0; i < vMainMenus.length; ++i) {
                      
          var opt=new Array();
                      opt
          =vMainMenus[i][0].split(":");
                      mainList.options[i] 
          = new Option(opt[0], opt[1]);
                  }

              }

              
          /*
              * 初始化子菜單
              *
              * @param mainList 主菜單列表框
              * @param subList 子菜單列表框
              
          */

              
          function initSubList(mainList,subList){
                  
          var idx = mainList.selectedIndex;
                  
          var subs = vMainMenus[idx];
                  subList.length 
          = 0;
                  
          for (var i = 0, j = 1; j < subs.length; ++i, ++j) {
                      
          var opt=new Array();
                      opt
          =subs[j].split(":");
                      subList.options[i] 
          = new Option(opt[0], opt[1]);
                  }

              }

              
          /**
              * 初始化
              *
              * @param mainList 主菜單列表框
              * @param subList 子菜單列表框
              
          */

              
          function load(mainList,subList){
                  initList();
                  initMainList(mainList);
                  initSubList(mainList,subList);
              }


              
          //fuction getHtmlStr()

              
          function initContent(objName){
                  
          //obj=document.getElementById(objName);
                  //obj.innerHTML=getHtmlStr(obj.value);
              }


          </script>
          <BODY>
              
          <form action="" method="post" name="formLists" id="formLists">
                  
          <!-- 當主菜單的選擇改變時,調用 initSubList(MainList, subList) 函數,并傳入正確參數 -->
                  
          <table width="400" border="1" cellpadding="5" cellspacing="0">
                      
          <tr>
                          
          <td>
                              
          <select name="mainMenu" id="mainMenu" onChange="initSubList(this, this.form.subMenus);">
                              
          </select>
                              
          <select name="subMenus" id="subMenus" onChange="initContent('dyn')">
                              
          </select>
                              
          <hr><br>
                              
          <span id="dyn"></span>
                          
          </td>
                      
          </tr>
                  
          </table>
              
          </form>
              
          <script language="JavaScript" type="text/JavaScript">
                  
          // 調用 load 進行初始化
                  load(document.all.formLists.mainMenu, document.all.formLists.subMenus);
              
          </script>
              這個是復雜的列表,用于select中“顯示內容”和“value值
          "不相等的情況
          </BODY>
          </HTML>

          posted on 2007-09-14 09:39 dreamstone 閱讀(2600) 評論(0)  編輯  收藏 所屬分類: 片段腳本語言javascript

          主站蜘蛛池模板: 黄冈市| 凌云县| 陇西县| 沭阳县| 濉溪县| 临城县| 日土县| 翼城县| 虞城县| 白朗县| 马关县| 和林格尔县| 崇文区| 徐汇区| 泗洪县| 葫芦岛市| 河间市| 贵南县| 和平县| 嘉祥县| 宁化县| 宁城县| 兰坪| 铅山县| 长阳| 鲁山县| 图片| 垦利县| 刚察县| 高邮市| 大姚县| 绥中县| 南澳县| 玛多县| 新疆| 石景山区| 高青县| 新余市| 衡东县| 宝兴县| 沙坪坝区|