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 相关文章推荐
jQuery 方法大全方便学习参考
Feb 25 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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 命令行参数详解及应用
2011/05/18 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
js实现导航跟随效果
2018/11/17 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
使用typescript构建Vue应用的实现
2019/08/26 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
深入解析Python中的urllib2模块
2015/11/13 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
python生成密码字典的方法
2018/07/06 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
python pycharm的安装及其使用
2019/10/11 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
财务副总经理工作职责
2013/11/25 职场文书
运动会领导邀请函
2014/01/10 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
招商银行工作证明
2015/06/17 职场文书
敬老院活动感想
2015/08/07 职场文书
2016年校长新年寄语
2015/08/17 职场文书
Redis keys命令的具体使用
2022/06/05 Redis