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 相关文章推荐
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
js遍历td tr等html元素
Dec 13 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
Vue项目路由刷新的实现代码
Apr 17 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 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/10/09 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
Ionic快速安装教程
2016/06/03 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python 装饰器使用详解
2017/07/29 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
python安装sklearn模块的方法详解
2020/11/28 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
给导游的表扬信
2014/01/10 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
2014年环保工作总结
2014/11/26 职场文书
实习指导教师评语
2014/12/30 职场文书
材料员岗位职责
2015/02/10 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
Django REST framework 限流功能的使用
2021/06/24 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server