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之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
自己使用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
农民C键的运用技巧
2020/03/04 星际争霸
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
PHP面向对象概念
2011/11/06 PHP
php验证session无效的解决方法
2014/11/04 PHP
php安装swoole扩展的方法
2015/03/19 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
Python语言快速上手学习方法
2018/12/14 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
4s店机修工岗位职责
2013/12/20 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript