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


只有注册用户登录后才能发表评论。


网站导航: