jQuery实现的多选框多级联动插件

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);相关阅读:

基于JavaScript实现动态创建表格和增加表格行数

ASP.NET 页面传值常用方法总结

简介BootStrap model弹出框的使用

高性能PHP框架Symfony2经典入门教程

Ubuntu系统怎么设置开机屏幕亮度？

jQuery实现二级下拉菜单效果

Win10系统隐藏本地磁盘以保护重要文件的小技巧

PHP实现WebService的简单示例和实现步骤

深入解析Java并发程序中线程的同步与线程锁的使用

JavaScript原生对象之Number对象的属性和方法详解

Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

MAC升级OS X 10.8后Game Center无法连接怎么修复？

win7系统启动/关闭mysql数据库服务图文教程

javascript中cookie对象用法实例分析