jquery實現(xiàn)的多選框多級聯(lián)動插件

字號:


    jquery 實現(xiàn)地多選框聯(lián)動插件
    代碼如下:
    // 使用:$(_event_src_).autoselect(_reload_, reload_url);
    // 前臺用get方法傳輸<select>標簽地屬性name和選中<option>地屬性value
    // 后臺用json格式傳輸數(shù)據(jù)
    // 格式: { 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) {
    // 綁定聯(lián)動鏈
    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 格式傳輸數(shù)據(jù)
    } else {
    $.selectreset(target.data(nextselect));
    }
    });
    });
    };
    })(jquery);
    :