Question

我试图弄清楚如何最好地允许两个不同标准组之间的多选。现在，在我的示例中选择Yellow和Small将返回所有Yellow和所有Small元素。我希望能回到黄与小的交汇点。

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

});

Answer 2

......也许是这个？

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

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

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（小孩）

.selectable（）从不同的标准组中多选

3 个答案:

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