javascript - JQuery 在 SELECT 之间移动项目并过滤意外行为

Question

这是一个现场演示:jsfiddle

过滤对于左侧的框来说效果很好。

在两个列表之间移动项目也效果很好。

当我将一个项目移动到右侧框中，然后进行过滤时，就会出现问题，它会删除右侧框中的所有内容。

如何让它在过滤时将项目留在右侧框中，并且如果这些项目位于右侧框中，则不让这些项目显示在左侧框中(以避免重复)？

//MOVE SPECS BETWEEN BOXES
    function moveListItems(sourceID, destinationID) {
        var whatToMove = $("#"+sourceID+"  option:selected");

        if ( sourceID = "excluded-select" ) {
            whatToMove.attr('class', 'included-option');
        }
        if ( sourceID = "included-select" ) {
            whatToMove.attr('class', 'excluded-option');
        }

        whatToMove.remove().appendTo("#"+destinationID);
        return false;
    }

    $("#move-right-btn").click(function(){
        moveListItems("excluded-select", "included-select");
        return false;
    });

    $("#move-left-btn").click(function(){
        moveListItems("included-select", "excluded-select");
        return false;
    });




    var $opts = $(".excluded-option");

    $("#filter-specs-text").keyup(function () {
        var searchString = $(this).val().toLowerCase();
        $("#excluded-select").empty().append($opts);

        $(".excluded-option").each(function () {
            var text = $(this).text().toLowerCase();

            //found a match - show this entry
            if (text.indexOf(searchString) > -1) {
                $(this).prop("disabled", false);
            }

            //no match - hide this entry
            else {
               $(this).prop("disabled", true).detach();
            }
        });

    });

Answer 1

问题是 $opts 始终包含所有 .excluded-option，在您编写的 onkeyup 处理程序中，它会附加所有$opts 到第一个选择并过滤列表，这就是为什么包含的选项(应保留在第二个选择中)被推回到第一个选择。要解决此问题，您必须在每次在 2 个选择之间移动项目时更新 $opts:

$("#filter-specs-text").keyup(function () {
  //...
  //Use $opts here instead of $('.excluded-option')
  $opts.each(function () {
    //...
  }
}
function moveListItems(sourceID, destinationID) {
     var whatToMove = $("#"+sourceID+"  option:selected");         
     //here you update the $opts accordingly...
     if(sourceID == "excluded-select") $opts = $opts.not(whatToMove);
     else $opts = $opts.add(whatToMove);

     whatToMove.remove().appendTo("#"+destinationID);
 return false;
}

请注意，您应该更新 $opts，而不是每次触发 keyup 时重新选择 .excluded-option，这样这样做太糟糕了。

Demo.