jQuery实现的多选框多级联动插件


Posted in Javascript onMay 02, 2014

jQuery 实现的多选框联动插件

// 使用:$(_event_src_).autoSelect(_reload_, reload_url); 
// 前台用get方法传输<select>标签的属性"name"和选中<option>的属性"value" 
// 后台用json格式传输数据 
// 格式: { value:<option>的属性"value", text:<option>的显示文本 } 
(function($) { 
$.fn.extend({ 
autoSelect: function(dest, url) { 
return this.each(function() { 
$.SelectChange($(this), $(dest), url); 
}); 
}, 
}); // 重置复选框 
$.SelectReset = function(target) { 
if (target != null) { 
$.SelectReset(target.data("nextSelect")); 
target.empty(); 
target.append(target.data("defaultOpt")); 
} 
}; 
// 加载复选框 
$.SelectLoad = function(target, data) { 
$.each(data, function(index, content) { 
var option = $("<option></option>") 
.attr("value", content.value).text(content.text); 
target.append(option); 
}); 
}; 
// 绑定 change 事件 
$.SelectChange = function(target, dest, url) { 
// 绑定联动链 
target.data("nextSelect", dest); 
// 记录默认选项(first option) 
if (target.data("defaultOpt") == null) 
target.data("defaultOpt", target.children().first()); 
dest.data("defaultOpt", dest.children().first()); 
$(document).ready(function() { 
target.change(function(event) { 
var _target = event.target || window.event.srcElement; 
if (_target.value != target.data("defaultOpt").attr("value")) { 
$.getJSON(url, { 
"name": _target.name, 
"value": _target.value 
}, function(data, status) { 
if (status == "success") { 
$.SelectReset(target.data("nextSelect")); 
$.SelectLoad(target.data("nextSelect"), data); 
} 
}); // 后台以 json 格式传输数据 
} else { 
$.SelectReset(target.data("nextSelect")); 
} 
}); 
}); 
}; 
})(jQuery);
Javascript 相关文章推荐
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 #Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 #Javascript
jQuery简单图表peity.js使用示例
May 02 #Javascript
jsPDF导出pdf示例
May 02 #Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 #Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 #Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 #Javascript
You might like
PHP中的cookie
2006/11/26 PHP
php Smarty 字符比较代码
2011/02/27 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
Python自定义类的数组排序实现代码
2016/08/28 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Numpy之reshape()使用详解
2019/12/26 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
会计自我鉴定范文
2013/10/06 职场文书
宿舍违规检讨书
2014/01/12 职场文书
趣味体育活动方案
2014/02/08 职场文书
文明寝室申报材料
2014/05/12 职场文书
骨干教师事迹材料
2014/12/17 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
召开会议通知范文
2015/04/15 职场文书
警告通知
2015/04/25 职场文书
社区文明倡议书
2015/04/28 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS