`
tipx
  • 浏览: 108813 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

(纯静态)js有限级级联下拉框

    博客分类:
  • js
阅读更多
本代码纯属个人js练手,写着写着,顺便整理。(望哥们姐们手下留砖)

/**
 * N级联动v2.0
 *
 * @说明: 使用json数据格式,生成N级下拉框联运,
 *        在初始化联动前,可灵活设置json数据中相对应的id\text\value\parent以及topParent
 *
 * @author: tips
 * @date: 2009-09-07
 * @lastupdate: 2010-04-14
 * @调用: SelectN(数组, '下拉框id1', '下拉框id2', ...'第N个..ID');
 * @注意: 级数N<=254
 *       setProperties只能在其它初始化级联效果之前运行,否则将有可能出现异常
 *
 *       数据格式为: [{id:'cn', text:'中国', parent:'-'}, ...]
 *
 *       若需要设定其它键为id\text\parent,则使用SelectN.setProperties(json);
 *       例:SelectN.setProperties({idKey: 'ucode', textKey:'uname', textKey:'uname', parentKey:'fatherCode'});
 *           此时解析的数据格式将发生变化:[{ucode: 'aaa', uname: 'bbb', fatherCode:'xxx'}]
 *
 */
;(function() {

    var myData;
    var topParent='-';
    var idKey='id', textKey='text', valueKey=idKey, parentKey='parent';

    var SelectN = window.SelectN = function(data) {
        myData = data;
        var ids = [].slice.call(arguments, 1);//下拉框级数的ID,按级数顺序存入数组selectN

        //length-1 => 最后一个下拉框不添加onchange
        for(var i=0, len=ids.length-1; i<len; i++){
            var o = $(ids[i]);
            addEventHandler(o, 'change', (function() {
                var self=o, index=i+1;
                return function() {
                    showChild(self, ids, index);
                }
            })());
        }

        showChild(null, ids, 0);

        return SelectN;
    }
    /**
     * 指定data中的哪一项代表相应的id、text、value、parent等
     *
     * 设置属性,该方法必须在SelectN所有其它初始化方法之前调用!
     * @param Object opt 配置参数
     *        topParent - 代表顶级节点的值,默认为"-"
     *        idKey - 代表id的键名,默认为"id"
     *        textKey - 代表下拉框text的键名,默认为"text"
     *        valueKey - 代表下拉框value的键名,默认使用idKey
     *        parentKey - 代表parent的键名,默认为"parent"
     */
    SelectN.setProperties = function(opt) {
        topParent = opt.topParent || topParent;
        idKey = opt.idKey || idKey;
        textKey = opt.textKey || textKey;
        valueKey = opt.valueKey || idKey;
        parentKey = opt.parentKey || parentKey;

        return SelectN;
    }

    /**
     * 显示子级下拉框
     * @param Object(Select) oSelect 当前change的下拉框DOM
     * @param Array ids 联动的下拉框ID数组
     * @param int index 当前下拉框的下一级索引
     */
    function showChild(oSelect, ids, index) {
        var p = null == oSelect ? topParent : oSelect.options[oSelect.selectedIndex].xid;
        var ds = getChilds(p);
        clearSelect(ids, index);
        var child = $(ids[index]);
        for(var i=0,len=ds.length; i<len; i++){
            var currentObj = ds[i];
            //child.options[child.length] = new Option(ds[i].text, ds[i].text);
            var currentOpt = child.options[child.length] = new Option(currentObj[textKey], currentObj[valueKey]);
            //child.options[child.length-1].xid=ds[i].id;
            currentOpt.xid=currentObj[idKey];
            currentOpt.ownerObj = currentObj;
        }
    }

    /**
     * 获得子级数据
     * @param String p 父级代号
     * @return Array childs
     */
    function getChilds(p) {
        var childs = [];
        for(var i=0, len=myData.length; i<len; i++){
            //if(p == myData[i].parent)
            if(p == myData[i][parentKey]){
                childs.push(myData[i]);
            }
        }
        return childs;
    }
    /**
     * 清除所有子级下拉框
     * @param Array ids 联动的下拉框ID数组
     * @param int index 当前下拉框的下一级索引
     */
    function clearSelect(ids, index) {
        for(var i=index, len=ids.length; i<len; i++){
            $(ids[i]).length=1;
        }
    }
    function $(sid) {
        return document.getElementById(sid);
    }
    //为对象obj追加事件 -- 兼容IE与FF
    function addEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
            oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attachEvent) {
            oTarget.attachEvent("on" + sEventType, fnHandler);
        } else {
            oTarget["on" + sEventType] = fnHandler;
        }
    };
})();


下面是demo(附带几行测试用的数据):
    var data = [];

    data.push({id:'cn', text:'中国', parent:'-'});

    data.push({id:'fj', text:'福建', parent:'cn'});
    data.push({id:'gd', text:'广东', parent:'cn'});

    data.push({id:'fz', text:'福州', parent:'fj'});
    data.push({id:'xm', text:'厦门', parent:'fj'});
    data.push({id:'ly', text:'龙岩', parent:'fj'});

    data.push({id:'fz-fq', text:'福州1', parent:'fz'});
    data.push({id:'fz-mh', text:'福州2', parent:'fz'});
    data.push({id:'fz-cl', text:'福州3', parent:'fz'});

    data.push({id:'xm-dn', text:'厦门1', parent:'xm'});
    data.push({id:'xm-jm', text:'厦门2', parent:'xm'});
    data.push({id:'xm-xl', text:'厦门3', parent:'xm'});

    data.push({id:'yl-xl', text:'龙岩1', parent:'ly'});
    data.push({id:'yl-lc', text:'龙岩2', parent:'ly'});
    data.push({id:'yl-sh', text:'龙岩3', parent:'ly'});
    data.push({id:'yl-wp', text:'龙岩4', parent:'ly'});

    data.push({id:'gz', text:'广州', parent:'gd'});
    data.push({id:'sz', text:'深圳', parent:'gd'});
    data.push({id:'mx', text:'梅县', parent:'gd'});

    data.push({id:'gz-fq', text:'广州1', parent:'gz'});
    data.push({id:'gz-mh', text:'广州2', parent:'gz'});
    data.push({id:'gz-cl', text:'广州3', parent:'gz'});

    data.push({id:'sz-dn', text:'深圳1', parent:'sz'});
    data.push({id:'sz-jm', text:'深圳2', parent:'sz'});
    data.push({id:'sz-xl', text:'深圳3', parent:'sz'});

    data.push({id:'mx-xl', text:'梅县1', parent:'mx'});
    data.push({id:'mx-lc', text:'梅县2', parent:'mx'});
    data.push({id:'mx-sh', text:'梅县3', parent:'mx'});
    data.push({id:'mx-wp', text:'梅县4', parent:'mx'});

    data.push({id:'am', text:'美国', parent:'-'});

    data.push({id:'ny', text:'纽约', parent:'am'});
    data.push({id:'hsd', text:'华盛顿', parent:'am'});

//在onload后执行
window.onload = function() {
    /*
    SelectN.setProperties({
        topParent:'gd',  //设置顶级节点的parent值
         idKey:'ucode',   //指定data中的哪一项代表id
        textKey:'text',  //指定data中的哪一项代表下拉框中的text
        valueKey:'text', //指定data中的哪一项代表下拉框中的value
        parentKey:'parent' //指定data中的哪一项代表parent
    })(data, 'p1', 'p2', 'p3', 'p4');

    */
    SelectN.setProperties({valueKey:'text'}); //重新设定各属性的键值
    SelectN(data, 'p1', 'p2', 'p3', 'p4'); //初始化级联关系
}


下面是html相关的代码:
<body>
    <select id="p1"><option>-选择-</option></select><br/>
    <select id="p2"><option>-选择-</option></select><br/>
    <select id="p3"><option>-选择-</option></select><br/>
    <select id="p4"><option>-选择-</option></select>
</body>


把上面三段代码放到一起,就能看见效果了。

等哪天突然心血来潮了,再重构一下,加上Ajax动态级联功能
0
0
分享到:
评论
2 楼 wanxiaotao12 2014-01-15  
我想初始化页时, 默认显示 中国, 福建, 福州, 怎么有默认值?
1 楼 m472759132 2011-09-27  
[color=red][/c[size=small][/size]olor]

相关推荐

    好用简单的可编辑级联下拉框

    "好用简单的可编辑级联下拉框"就是一个旨在提升用户体验的组件,它将传统的静态下拉框与级联选择功能相结合,并引入了编辑能力,使得用户在选择过程中能够更加灵活和高效。 首先,我们要理解什么是“可编辑下拉框”...

    ajax实现可配置无刷新级联下拉框

    **Ajax 实现可配置无刷新级联下拉框** 在 Web 开发中,为了提供用户友好的交互体验,级联下拉框(Cascading Dropdown)是一个常见的需求。级联下拉框允许用户在一个下拉框中选择一个选项后,根据所选的选项动态更新...

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    在ExtJS 3.4.0版本中,多选下拉框(Multiselect Combobox)是一种常见的用户界面组件,用于提供多个选项供用户选择。这个功能增强了标准的单选下拉框,允许用户同时选择多个条目,通常通过复选框实现。在描述中提到...

    Ext combo 下拉框级联

    级联下拉框的实现主要依赖于`Ext.form.field.ComboBox`类,该类提供了级联数据加载和联动更新的功能。 首先,我们需要创建两个或多个级联的`ComboBox`实例,并为它们设置相应的配置项。这些配置项包括: 1. `store...

    JQuery + Servlet +Json实现下拉框级联

    在Web开发中,下拉框级联是一种常见的交互方式,用于构建多级选择的界面,例如省份、城市、区县的三级联动。本教程将详细讲解如何利用JQuery、Servlet和JSON技术来实现这一功能。 首先,JSON(JavaScript Object ...

    html js代码 省市区三级级联 完整版

    JavaScript是一种客户端脚本语言,广泛应用于网页动态效果和用户交互,使得网页不再只是静态展示,而是能够实时响应用户的操作。 首先,我们要理解什么是“三级级联”。在省市区三级级联中,“三级”指的是省份、...

    英文版js地区国家级联

    这个“英文版js地区国家级联”资源提供了一个纯JavaScript实现的解决方案,无需依赖数据库,简化了开发流程。以下是对这个资源的详细解读: 首先,我们要理解什么是级联选择菜单。级联菜单通常用于地理位置选择,...

    javascript实现省市区三级联动下拉框菜单

    本文将详细介绍如何使用JavaScript实现省市区三级联动下拉框菜单,实现过程中需要使用HTML构建静态页面,运用JavaScript进行动态的数据联动操作,并通过geo.js文件实现数据的调用和联动逻辑。 ### HTML页面结构 ...

    jQuery 级联下拉列表(修正版)

    在网页开发中,级联下拉列表是一种常见的交互设计,它允许用户在多个下拉框之间建立联动关系,通常用于地区选择(如省市区)、部门结构等场景。本知识点主要聚焦于使用jQuery实现的级联下拉列表,特别是修正版的实现...

    4个asp.net省份城市级联例子

    在ASP.NET开发中,省份城市级联是一种常见的需求,它通常用于用户输入地址时,先选择省份,再根据所选省份...在实际应用中,还需要考虑数据安全、性能优化以及兼容性等问题,确保级联下拉框在各种环境下都能正常工作。

    使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

    在本文中,我们将探讨如何使用Ajax和jQuery配合数据库来实现下拉框的二级联动效果,这对于构建交互式、响应式的Web应用非常重要。二级联动通常指的是一个下拉框的选择会影响另一个下拉框的内容,例如在选择省份后,...

    精典网页的代码及JS一些精典例子

    本资源包“精典网页的代码及JS一些精典例子”专注于讲解JavaScript在实际网页开发中的应用,特别是下拉框的动态效果、级联菜单的实现以及数组的巧妙运用。 首先,下拉框的移动是网页设计中常见的一种交互元素。在...

    PHP城市级联系统 下拉选择

    城市级联系统,或称地区级联选择,是一种常见的前端交互设计,它允许用户逐步选择他们的地理位置,例如国家、省份、城市,形成一个级联的下拉选择列表。这种设计提高了用户体验,减少了输入错误,并简化了数据处理。...

    jquery实例演示及动态效果

    例如,我们可以看到如何使用jQuery实现级联下拉框,即当用户在一个下拉框中选择一项时,根据选择自动填充另一个下拉框。 "级联"这个标签也表明了在这些实例中可能包含了联动效果,比如在多级菜单、筛选条件或地区...

    ASP动态级联菜单实现代码

    JavaScript部分的`redirect`函数首先清除了`type2`下拉框的所有选项,然后遍历`type2`记录集,找到与一级菜单选择值相匹配的记录(通过`news_type_1_id`比较),并在二级菜单中添加新的选项。这样,二级菜单就会根据...

    ajax城市三级联动

    HTML文件可能包含级联下拉框结构,JavaScript文件则包含Ajax请求和数据处理逻辑,而JSON文件可能是预加载的城市数据。在实际开发中,确保这些文件能正确地结合并协同工作,是实现城市三级联动的关键。

    MVC级联选择

    在**视图(View)**层面,我们可以使用HTML辅助方法和jQuery来创建和更新级联下拉框。HTML辅助方法如`Html.DropDownListFor()`可以帮助生成下拉列表,而jQuery则用于监听选择事件,向控制器发送AJAX请求,并更新下拉框...

    jsp中一些简单页面技术

    本文将深入探讨"jsp中一些简单的页面技术",包括多级静态树的实现、时间验证的处理方法以及级联下拉菜单的应用。 首先,让我们来看看多级静态树的构建。在JSP中,创建一个多级静态树常用于展示层次结构的数据,如...

    一个级联菜单(IE ONLY),不过代码很精简!

    文档的注释中提到了“引入外部Js需刷新才能执行”,这暗示了可能有JavaScript文件参与到级联菜单的逻辑中。在网页中引入外部JS文件一般需要考虑文件加载的时机和异步加载的问题。 通过对上述知识点的详细说明,我们...

Global site tag (gtag.js) - Google Analytics