jQuery实现的多选框多级联动插件
发布时间:2020-12-14 23:17:40 所属栏目:资源 来源:网络整理
导读:jQuery 实现的多选框联动插件 复制代码 代码如下: // 使用:$(_event_src_).autoSelect(_reload_,reload_url); // 前台用get方法传输select标签的属性"name"和选中option的属性"value" // 后台用json格式传输数据 // 格式: { value:option的属性"value",text:
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); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |