jQuery实现的多选框多级联动插件_jquery 程序员文章站 2022-05-26 22:01:15 ... jQuery 实现的多选框联动插件 复制代码 代码如下: // 使用:$(_event_src_).autoSelect(_reload_, reload_url); // 前台用get方法传输标签的属性"name"和选中的属性"value" // 后台用json格式传输数据 // 格式: { value: 的属性"value", text: 的显示文本 } (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 = $(" ") .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); 相关标签: jQuery 多级联动 多选框 上一篇: mysql-Mysql做了主从配置之后,启动项目就出现异常了。提示Hibernate什么的,不知道这么回事 下一篇: jdbc4.CommunicationsException: Communications link failure 推荐阅读 编写自己的jQuery插件简单实现代码_jquery 基于jQuery实现一个marquee无缝滚动的插件 jQuery插件实现非常实用的tab栏切换功能【案例】 jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】 jQuery插件实现的日历功能示例【附源码下载】 基于jQuery实现一个marquee无缝滚动的插件 PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用 jQuery插件zTree实现的多选树效果示例 jQuery操作复选框(CheckBox)的取值赋值实现代码 JQuery实现省市区的三级联动