专栏首页更流畅、简洁的软件开发方式【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的

【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的

多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于jQuery,无限级联动,支持下拉列表框和列表框。

先说一下步骤和使用方法:

1、在页面里设置列表框

 城市:<select name="c5118020" id="ctrl_001" >
        <option value="-99999">请选择</option><option value="1">沈阳</option><option value="2">抚顺</option><option value="3">鞍山</option><option value="4">营口</option><option value="5">大连</option>
    </select><br/>
    区县:<select size="1" name="c5118030" id="ctrl_002">
        <option value="1">请先选择城市</option>
    </select><br/>
    街道:<select id="ctrl_003" name="c5118040" > 
        <option value="1">请先选择区县</option>
    </select><br/>
    社区:<select id="ctrl_004" name="c5118050" >
        <option value="1">请先选择街道</option>
    </select>

排版布局可以随意设定,id、name、css等都没有任何限制。

2、引用js

<script language="javascript" type="text/javascript" src="nature.head.js"></script>
    <script language="javascript" type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="Nature.Control.Base.js"></script>
    <script language="javascript" type="text/javascript" src="Nature.Control.Base.UnionList.js"></script>

3、设置联动列表框的属性和事件

       var uLst;

       window.onload = function () {
           //定义需要的属性 
           var lstEvent = {
               lstObjects: [$("#ctrl_001"), $("#ctrl_002"), $("#ctrl_003"), $("#ctrl_004")],     //联动列表的集合,数组形式
               ajaxPara: [{}, {}, {}, {}],      //访问ajax的参数,结构可以自行定义,联动列表框只负责传递
               //列表框的change事件。
               //selectValue:列表框选择的值,
               //lst:下一个列表框的对象,
               //ajaxPara:调用下一个列表框需要的参数
               //callback:回调函数,触发列表框的change事件,也可以直接写lst.change();
               lstChange: function (selectValue, lst, ajaxPara, callback) {
                   //alert(selectValue);
                   //alert(lst);

                   /* 模拟操作。您可以根据自己的需求改成ajax的方式,ajaxPara:调用下一个列表框需要的参数
                   如果采用ajax的方式来获取记录集,那么请在数据请求完毕之后,并且绑定列表框之后再调用callback
                   */
                   lst.append("<option value='" + selectValue + "_1'>" + selectValue + "_text1</option>");
                   lst.append("<option value='" + selectValue + "_2'>" + selectValue + "_text2</option>");
                   lst.append("<option value='" + selectValue + "_3'>" + selectValue + "_text3</option>");
                   lst.append("<option value='" + selectValue + "_4'>" + selectValue + "_text4</option>");

                   callback(lst);

               }
           };

           //实例基础控件                   
           var baseCtrl = new Nature.Controls.BaseControl({});
           //创建联动列表框
           uLst = baseCtrl.UnionList(lstEvent);

       };

lstEvent 属性说明

lstObjects:数组形式,里面存放列表框,请注意先后顺序,第一级放在第一位,第二级放在第二位,以此类推。顺序不能弄错。

ajaxPara:大多数联动,都是用ajax的方式来获取选项,使用ajax就需要一些参数,那么可以把需要的参数放在这里,然后在change事件里,可以得到对应的列表框的选项需要的参数。

lstChange:任何一个列表框的选项发生变化,都会触发这个事件,在这里可以实现填充下一个列表框的选项。由于大部分获取选项都是使用ajax异步的方式,所以设置了一个回调函数,这样在ajax获取选项之后,可以通过callback的方式来回调,也就是触发下一个列表框的change事件。

 =========================================

基本情况就是这样了。然后在说一下如何获取列表框的选项

获取列表框的选项(option、item)有很多很多种方法,记录集的格式也是千差万别,所以也没法集合到联动列表框内部。另外本着单一职责和低耦合的原则,还有更通用一点的需求,也是应该把获取列表框的选项的功能放在外部处理。

在页面里直接获取选项,可以用ajax,也可以用其他的方式。由于没有把这个功能放在内部实现,所以就做了一个很简单的演示,模拟一个假数据。根据上一个列表框的选择值,来设定下一个列表框的text。这样是想有一个比较明显的区分。

 最后是在线演示

ps:

1、优缺点

优点是比较通用,能够方便一点点。缺点是,还是太麻烦。

做完了自后,有重新想了一遍,这么做比直接实现到底有啥区别呢?好像也没啥大的区别嘛,哈哈。怪不得网上没啥知名的联动列表框呢,原来这个东东比较鸡肋,哈哈。

2、有待完善的地方

其实联动列表框的难点不是如何联动,而是如何设置默认选项。比如在修改记录时,字段值是 沈阳市、和平区、某某街道、某某社区,那么就应该把列表框的默认选项给设置上。但是选项是动态生成的,而且还是ajax获取的,这个问题想了好几天,截止到现在才有了一个明确的思路。不知道您有没有什么好的办法。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从吉日嘎拉那里学到的……

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于jQuery,无限级联动,支持...

    用户1174620
  • 以【联动列表框】来看单一职责!

    联动列表框,简简单单的五个字,仅仅从字面上看,就可以分出来两个职责: 职责一:列表框 职责二:联动 我们先来看这两个职责,然后再说引申出来的另外两个职责。 职责...

    用户1174620
  • 【自然框架】 权限 的视频演示(二): 权限到字段、权限到记录

          继续。这里演示权限到字段和权限到记录。       权限到字段有两种安全级别,       1、低安全级别。有些项目不需要做到控制每一个字段是否显示...

    用户1174620
  • 从吉日嘎拉那里学到的……

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于jQuery,无限级联动,支持...

    用户1174620
  • MeritMS与Bentley Project Wise对比校审流程

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

    hotqin888
  • 遗传算法selection总结-[Fitness, Tournament, Rank Selection]

    该方法也叫 Roulette Wheel Selection(轮盘赌博选择),种群中的个体被选中的概率与个体相应的适应度函数的值成正比。

    marsggbo
  • spring boot 起步依赖与传递依赖

    org.springframework:spring-test 起步依赖:GroupId :org.springframework.boot 传递依赖

    小小明童鞋
  • 资源 | 数据科学家必备的21个命令行工具

    选自active wizards 机器之心编译 参与:蒋思源 在该篇文章中,我们将介绍用于快速分析存储于文本文件(日志、报文等等)中的数据的便利工具。 通常我们...

    机器之心
  • 怎么选择和快速搭建个人博客 转

    目前比较流行的博客实现可以分为三种方式,各有不同程度的技术门槛、功能支持、主题颜值等。接下来将会通过实例展示不同的博客形式。

    wuweixiang
  • 数据科学家必备的21个命令行工具

    在该篇文章中,我们将介绍用于快速分析存储于文本文件(日志、报文等等)中的数据的便利工具。

    华章科技

扫码关注云+社区

领取腾讯云代金券