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 相关文章推荐
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
utf8的编码算法 转载
2006/12/27 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
Win11更新失败并提示0xc1900101
2022/04/19 数码科技