javascript - .selectable() 从不同条件组中进行多项选择

Question

我正在尝试找出如何最好地允许在两个不同标准组之间进行多重选择。现在，在我的示例中选择黄色和小元素将返回所有黄色和所有小元素。我希望返回 Yellow 和 Small 的交集。

http://jsfiddle.net/RKxj7/16/

.selectable({selected: function () {
$("#table-content tr").hide();
if ($("#Red").is(".ui-selected")) {
$(".color:contains('Red')").showParent();
}
...
if ($("#Small").is(".ui-selected")) {
$(".size:contains('Small')").showParent();
}

Answer 1

试试这个:- http://jsfiddle.net/adiioo7/RKxj7/19/

JS:-

function toggleSelected() {
    $("#table-content tr").hide();
    var colorSelected = $(".selector .ui-selected").length;
    var sizeSelected = $(".selector2 .ui-selected").length;
    if ((colorSelected > 0 && sizeSelected == 0) || (colorSelected == 0 && sizeSelected > 0)) {
        $(".selector").find(".ui-selected").each(function () {
            $(".color:contains(" + $(this).text() + ")").showParent();
        });

        $(".selector2").find(".ui-selected").each(function () {
            $(".size:contains(" + $(this).text() + ")").showParent();
        });
    } else {
        $(".selector").find(".ui-selected").each(function () {
            var selectedColor = $(".color:contains(" + $(this).text() + ")");

            $(".selector2").find(".ui-selected").each(function () {
                selectedColor.parent().find(".size:contains(" + $(this).text() + ")").showParent();
            });

        });
    }

    if ($(".ui-selected").length == 0) $("#table-content").find("tr").show();
}
$(document).ready(function () {
    $.fn.showParent = function () {
        $(this).parent().show();
    };

    $(".selector, .selector2").bind("mousedown", function (e) {
        e.metaKey = true;
    }).selectable({
        selected: toggleSelected,
        unselected: toggleSelected
    });

});