javascript 关联列表的实现(简单的和复杂的)

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>