zoukankan      html  css  js  c++  java
  • 纯js的N级联动列表框 —— 基于jQuery

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于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获取的,这个问题想了好几天,截止到现在才有了一个明确的思路。不知道您有没有什么好的办法。

  • 相关阅读:
    赫尔维茨公式
    从解析几何的角度分析二次型
    Struts 1 Struts 2
    记一次服务器被入侵的调查取证
    契约式设计 契约式编程 Design by contract
    lsblk df
    Linux Find Out Last System Reboot Time and Date Command 登录安全 开关机 记录 帐号审计 历史记录命令条数
    Infrastructure for container projects.
    更新文档 版本控制 多版本并发控制
    Building Microservices: Using an API Gateway
  • 原文地址:https://www.cnblogs.com/ShaYeBlog/p/3148164.html
Copyright © 2011-2022 走看看