jQuery多级联动多选框

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);