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);
网友评论文明上网理性发言 已有0人参与
发表评论: