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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
Vue中的异步组件函数实现代码
Jul 20 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
js 函数调用模式小结
2011/12/26 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
js打造数组转json函数
2015/01/14 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
对python使用http、https代理的实例讲解
2018/05/07 Python
详解python做UI界面的方法
2019/02/27 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
最新教师自我评价分享
2013/11/12 职场文书
大学毕业感言50字
2014/02/07 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
员工表扬信怎么写
2015/05/05 职场文书
防溺水主题班会教案
2015/08/12 职场文书
初中体育教学随笔
2015/08/15 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
详解CocosCreator消息分发机制
2021/04/16 Javascript
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
Nginx安装配置详解
2022/06/25 Servers
Spring Boot实现文件上传下载
2022/08/14 Java/Android