jQuery实现的多选框多级联动插件_Javascript教程-查字典教程网
jQuery实现的多选框多级联动插件
jQuery实现的多选框多级联动插件
发布时间:2016-12-30 来源:查字典编辑
摘要:jQuery实现的多选框联动插件复制代码代码如下://使用:$(_event_src_).autoSelect(_reload_,reloa...

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教程学习
    编程开发子分类