javascript - .selectable() 从不同的标准组中多选

Question

我试图弄清楚如何最好地允许在两个不同的标准组之间进行多选。现在，在我的示例中选择 Yellow 和 Small 将返回所有 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

……也许是这个？

.selectable({ selected: function () {
        $("#table-content tr").show();
        if (!$("#Red").is(".ui-selected")) {
            $(".color:contains('Red')").hideParent();
        }

http://jsfiddle.net/RKxj7/37/

Answer 2

试试这个：- http://jsfiddle.net/aidioo7/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
    });

});

Answer 3

添加 .css 使它变得丰富多彩，并且选择了大小：http: //jsfiddle.net/kjelenak/RKxj7/55/

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 () {
                 var colour = $(this).text();
            $(".color:contains(" + $(this).text() + ")").css("color", colour).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 () {
    var size = $(this).text();            selectedColor.parent().find(".size:contains(" + $(this).text() + ")").css("font-size", size).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
    });

});

基于https://stackoverflow.com/a/19558160/3476753 (wiz Kid)