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 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
js类的继承定义与用法分析
Jun 21 Javascript
在JavaScript中如何使用宏详解
May 06 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中上传大体积文件时需要的设置
2006/10/09 PHP
php生成缩略图的类代码
2008/10/02 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
关于学习的演讲稿
2014/05/10 职场文书
员工安全生产承诺书
2014/05/22 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
Python中文纠错的简单实现
2021/07/07 Python