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 attachEvent和addEventListener使用方法
Mar 19 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
微信小程序select下拉框实现源码
Nov 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
php str_replace的替换漏洞
2008/03/15 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python检测网站链接是否已存在
2016/04/07 Python
Python 中的with关键字使用详解
2016/09/11 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
python实现词法分析器
2019/01/31 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
会计职业生涯规划范文
2014/01/04 职场文书
四风存在的原因分析
2014/02/11 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
公司门卫岗位职责
2015/04/13 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL