jquery插件 autoComboBox 下拉框


Posted in Javascript onDecember 22, 2010

问: 1.大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢??
答: 是,留下继续阅读.
否,跟帖回复你的方法
结论:每次重复劳动 重复创造联动的下拉框, 累,想死!! 读完本文 您也许可以找到更好的方法来实现 无限级(理论) 的联动下拉框,也许只要10秒钟就够了.
就这样,一个自动产生联动下拉框的插件诞生了...
本插件依赖于jquery1.4.2 最低版本自行测试.
废话完毕.
代码:
<div class="zldd-AutoComboBox" id="div_autoComboBox">
</div>

调用方法:

var data= [{ "id": 25, "text": "淮安分公司", "children": [{ "id": 26, "text": "办公室(行政人事培训)"}] }, { "id": 52, "text": "研发部" }, { "id": 53, "text": "财务部"}] 
$("#div_autoComboBox").AutoComboBox({ 
cssClass: "autoComboBox", 
nullDispaly: true, 
//url: "ComboBoxTreeDept_Data.aspx", 
//如果没有使用远程数据 则可以使用本地数据源 使用上面定义的data变量 注:如果url不为空时 优先使用远程数据源 
// ps:只请求一次数据库,数据源将存放在客户端 
data:data, 
firstValue: [true, "==请选择==", "==请选择=="] //是否自动创建第一个值 这个值通常为 请选择 ,不限等 
});

结果: 这样就一个无限级(理论) 的联动下拉框就出来了.. 如果你拷贝一下以上代码,修改一下url参数 10秒钟够了吧??? 注:关于json格式,包括名称,请自行转换,本源码也包含一个只针对本插件转换json的一个dll.
(引用后:
///dataset 数据源
///要显示text
///id,, 你懂的
///父id, 你也懂的
///忽略....
string treeJson = zlddEasyUiHelp.CreateTree.DataSetToTree(ds_department, "Dept_Name", "Dept_ID", "Dept_PId",false);
)
问:我怎么获取用户选择的值.?
答: 一句代码搞定,并支持多个参数重载
$("#div1").ComboBoxGetValue([index],[ErrorFn]); 
//可选参数说明: 
//index,获取第几个下拉框的值,默认最后一个(如果不填写也是获取最后一个值) 
// ErrorFn,获取值时遇到错误 如:假设现在是省市区联动,您要获取第三个下拉框(区),但是用户只选择到了市,这将会获取不到,那么将调用传递进去的方法 
//该回调方法写法如下: 
var ErrorFn = function () { 
alert("错误了"); 
}

看到此处您是否会用了???如果不会,你懂的,回帖....
接下来说下"修改"功能
如:刚才用户选择了自己的 地址, 那么现在用户需要修改,用户刚才选择到了"区",我们要初始化联动下拉框 并且要设置区,市,省的默认值.
很简单: 在上面的代码加一句话(下方红色标注的代码)就会自动初始化带默认值的联动下拉框
例:
$("#div_autoComboBox").AutoComboBox({ 
cssClass: "autoComboBox", 
nullDispaly: true, 
//url: "ComboBoxTreeDept_Data.aspx", 
//如果没有使用远程数据 则可以使用本地数据源 使用上面定义的data变量 注:如果url不为空时 优先使用远程数据源 
// ps:只请求一次数据库,数据源将存放在客户端 
data:data, 
defaultValue: 76, 
firstValue: [true, "==请选择==", "==请选择=="] //是否自动创建第一个值 这个值通常为 请选择 ,不限等 
});

关于"修改"功能的诞生背景,有兴趣的看...
话说本插件是不可以设置默认值的,也就是不能自初始化带默认值的下拉框
但是,由于一个美女诱惑我,说"你要弄出来,我就干嘛嘛",,具体干嘛,各位懂的....
到此介绍完毕
源码下载,/201012/yuanma/AutoComboBoxs.rar(已更新)

(源码只包括插件源码,转换json格式字符串的dll)
2011年1月4日17:12:39更新

版本 v1.1

更新内容

修复部分已知bug(如果子类没有顶级选项如"请选择" 造成第三级无法创建的问题)

增加获取选定项对象的方法

性能的优化

原文: http://www.cnblogs.com/337212522/archive/2010/12/21/1912381.html

Javascript 相关文章推荐
JavaScript this 深入理解
Jul 30 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
微信小程序实现文件预览
Oct 22 Javascript
Jquery截取中文字符串的实现代码
Dec 22 #Javascript
jquery里的each使用方法详解
Dec 22 #Javascript
jQuery学习笔记之jQuery的动画
Dec 22 #Javascript
jQuery学习笔记之jQuery的事件
Dec 22 #Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 #Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 #Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 #Javascript
You might like
数据库查询记录php 多行多列显示
2009/08/15 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
浅谈PHP封装CURL
2019/03/06 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
用python制作游戏外挂
2018/01/04 Python
Django之模型层多表操作的实现
2019/01/08 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
运动会开幕式主持词
2014/03/28 职场文书
求职信范文大全
2014/05/26 职场文书
护士工作失误检讨书
2014/09/14 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
市场督导岗位职责
2015/04/10 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
同学聚会祝酒词
2015/08/10 职场文书
小学英语教学随笔
2015/08/14 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
用Python生成会跳舞的美女
2022/01/18 Python