从吉日嘎拉那里学到的……
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于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获取的,这个问题想了好几天,截止到现在才有了一个明确的思路。不知道您有没有什么好的办法。
- 震惊!Vector两行代码求逆序对,六行代码过普通平衡树
- 数据城堡参赛代码实战篇(五)---使用sklearn解决分类问题
- 洛谷P1894 [USACO4.2]完美的牛栏The Perfect Stall
- [编程经验]Python生成器、迭代器与yield语句小结
- TensorFlow从0到1 - 12 - TensorFlow构建3层NN玩转MNIST
- 数据城堡参赛代码实战篇(四)---使用pandas合并数据表
- HDU 2586 How far away ?
- HDU 3078 Network
- 数据城堡参赛代码实战篇(三)---我们来探究一个深奥的问题!
- 数据城堡参赛代码实战篇(二)---使用pandas进行数据去重
- 洛谷P3375 【模板】KMP字符串匹配
- Day5下午解题报告1
- [编程经验] Python中处理时间的方法小结
- 数据城堡参赛代码实战篇(一)---手把手教你使用pandas
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 搞它!!!Linux系统安全及应用以弱口令检测
- 搞它!!!linux配置本地yum源
- JAVA网络编程TCP通信
- 使用ExecutorService实现线程池
- 搞它!!!linux服务器硬件及RAID 配置实战
- 认识XML
- 基于oracle的sql(结构化查询语言)指令
- oracle约束条件
- oracle常用函数介绍
- 搞它!!!Linux系统中查看进程和计划任务管理
- 搞它!!!深入了解linux文件系统底层原理及日志文件介绍
- 搞它!!!Linux系统MBR分区和GPT分区的区别
- oracle补充
- 搞它!!!Linux系统LVM原理及磁盘配额(PV、VG、LV、PE的关系,手把手教你,嘴对嘴的传达)
- 搞它!!!linux网络服务基本设置命令合集