Javascript JQuery在SELECT之间移动项，并过滤意外行为

这是一个现场演示：

过滤对左边的框非常有效

在两个列表之间移动项目也非常有效

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

如何让它在过滤后将项目保留在右框中，而不让这些项目在右框中显示在左框中（以避免重复）？

//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();
            }
        });

    });

---

由于您正在预先选择$opts，因此即使您更改了它们的类或id，这些选定的项也将保持不变。您必须在keyup事件处理程序中重新选择它们

由于您正在预先选择$opts，因此即使您更改了它们的类或id，所选的项目仍将保持不变。您必须在keyup事件处理程序中重新选择它们

由于您正在预先选择$opts，因此即使您更改了它们的类或id，所选的项目仍将保持不变。您必须在keyup事件处理程序中重新选择它们

由于您正在预先选择$opts，因此即使您更改了它们的类或id，所选的项目仍将保持不变。您必须在keyup事件处理程序中重新选择它们

问题在于，

$opts

总是包含所有的

。排除选项

s，在您编写的

onkeyup

处理程序中，它将所有的

$opts

附加到第一个选择，然后过滤列表，这就是为什么包含的选项（应该保留在第二个选择中）被推回第一个选择的原因。要解决此问题，每次在两个选项之间移动项目时，必须更新

$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选项

每次触发

键控

，这样做太可怕了

---

问题是

$opts

始终包含所有

。排除选项

s，在您编写的

onkeyup

处理程序中，它将所有

$opts

附加到第一个选择，然后过滤列表，这就是为什么包含的选项（应保留在第二个选择中）被推回第一个选择的原因。要解决此问题，每次在两个选项之间移动项目时，必须更新

$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选项

每次触发

键控

，这样做太可怕了

---

问题是

$opts

始终包含所有

。排除选项

s，在您编写的

onkeyup

处理程序中，它将所有

$opts

附加到第一个选择，然后过滤列表，这就是为什么包含的选项（应保留在第二个选择中）被推回第一个选择的原因。要解决此问题，每次在两个选项之间移动项目时，必须更新

$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选项

每次触发

键控

，这样做太可怕了

---

问题是

$opts

始终包含所有

。排除选项

s，在您编写的

onkeyup

处理程序中，它将所有

$opts

附加到第一个选择，然后过滤列表，这就是为什么包含的选项（应保留在第二个选择中）被推回第一个选择的原因。要解决此问题，每次在两个选项之间移动项目时，必须更新

$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选项

每次触发

键控

，这样做太可怕了

---

像这样：但不幸的是，它有同样的行为。谢谢你的建议。对不起，我走错了路，编辑了我的答案。这应该可以更好地工作，但您必须以某种方式保留/存储删除的项目：这确实更接近，但由于列表已被筛选和取消筛选（退格），列表中的所有原始项目都不会被还原。是的，我知道克隆（）是最终的解决方案。谢谢你的帮助。我认为这可能也会帮助其他人。就像这样：但不幸的是，它也有同样的行为。谢谢你的建议。对不起，我走错了路，编辑了我的答案。这应该可以更好地工作，但您必须以某种方式保留/存储删除的项目：这确实更接近，但由于列表已被筛选和取消筛选（退格），列表中的所有原始项目都不会被还原。是的，我知道克隆（）是最终的解决方案。谢谢你的帮助。我认为这可能也会帮助其他人。就像这样：但不幸的是，它也有同样的行为。谢谢你的建议。对不起，我走错了路，编辑了我的答案。这应该可以更好地工作，但您必须以某种方式保留/存储删除的项目：这确实更接近，但由于列表已被筛选和取消筛选（退格），列表中的所有原始项目都不会被还原。是的，我知道克隆（）是最终的解决方案。谢谢你的帮助。我认为这可能也会帮助其他人。就像这样：但不幸的是，它也有同样的行为。谢谢你的建议。对不起，我走错了路，编辑了我的答案。这应该可以更好地工作，但您必须以某种方式保留/存储删除的项目：这确实更接近，但由于列表已被筛选和取消筛选（退格），列表中的所有原始项目都不会被还原。是的，我知道克隆（）是最终的解决方案。谢谢你的帮助。我认为这也可能对其他人有所帮助。