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 相关文章推荐
treepanel动态加载数据实现代码
Dec 15 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
Node调用Java的示例代码
Sep 20 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
js实现省级联动(数据结构优化)
Jul 17 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
生成缩略图
2006/10/09 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
python删除文本中行数标签的方法
2018/05/31 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python 判断奇数偶数的方法
2018/12/20 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
基于python调用psutil模块过程解析
2019/12/20 Python
python连接PostgreSQL过程解析
2020/02/09 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
法定代表人授权委托书
2014/04/04 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
单位工作证明范本
2015/06/15 职场文书
Django实现翻页的示例代码
2021/05/24 Python