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 相关文章推荐
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
js获取 type=radio 值的方法
May 09 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 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 foreach 参数强制类型转换的问题
2010/12/10 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
ucenter通信原理分析
2015/01/09 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python画图学习入门教程
2016/07/01 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python妙用之编码的转换详解
2017/04/21 Python
python连接mongodb密码认证实例
2018/10/16 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
python 变量初始化空列表的例子
2019/11/28 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
接受捐赠答谢词
2014/01/27 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
日化店促销方案
2014/03/26 职场文书
我的中国心演讲稿
2014/09/04 职场文书
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis