javascript 关联列表的实现(简单的和复杂的) -凯发k8网页登录

开发出高质量的系统

常用链接

统计

积分与排名

好友之家

最新评论

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">
        
        <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值"相等的情况，不相等的见下一个例子



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">
        
        <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值"不相等的情况


posted on 2007-09-14 09:39 dreamstone 阅读(2520) 评论(0)  编辑  收藏 所属分类: 片段 、脚本语言javascript

网站地图