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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
小程序自定义模板实现吸顶功能
Jan 08 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中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php微信开发接入
2016/08/27 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
JS判断数组那点事
2017/10/10 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
python数据结构之图的实现方法
2015/07/08 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
应届毕业生求职信范文分享
2013/12/26 职场文书
德语专业求职信
2014/03/12 职场文书
幼儿园招生广告
2014/03/19 职场文书
同事打架检讨书
2015/05/06 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers