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 s，在您编写的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，而不是每次触发.excluded-option时重新选择keyup，这样做太可怕了。

Demo.

Answer 2

由于您选择了$ opts，所以即使您更改了他们的类或ID，所选的项目也将保持不变。您必须在keyup事件处理程序中重新选择它们。

JQuery在SELECT之间移动项目以过滤意外行为

2 个答案:

Demo.