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 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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循环中使用引用要注意的地方
2011/01/02 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
php全角字符转换为半角函数
2014/02/07 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
纽约手袋品牌:KARA
2018/03/18 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
竞选演讲稿范文
2013/12/28 职场文书
2014年教学工作总结
2014/11/13 职场文书
后勤个人工作总结
2015/02/28 职场文书
加薪申请报告范本
2015/05/15 职场文书
2015小学师德工作总结
2015/07/21 职场文书
车辆管理制度范本
2015/08/05 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书