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 阅读(2560) 评论(0)  编辑  收藏 所属分类: 片段 、脚本语言javascript


只有注册用户登录后才能发表评论。
网站导航: