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 相关文章推荐
js+jquery实现图片裁剪功能
Jan 02 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php中对2个数组相加的函数
2011/06/24 PHP
php URL验证正则表达式
2011/07/19 PHP
JavaScript全局函数使用简单说明
2011/03/11 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
python复制文件的方法实例详解
2015/05/22 Python
python实现简单登陆流程的方法
2018/04/22 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python之django母板页面的使用
2018/07/03 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
千元咖啡店的创业计划书范文
2013/12/29 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
学习保证书范文
2014/04/30 职场文书
刑事和解协议书范本
2014/11/19 职场文书
档案接收函格式
2015/01/30 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书