Javascript 使用JQuery detach and restore筛选选择列表

我正在使用jquery并尝试使用detach/prepend/append动态删除和重新插入select上的选项项

因为隐藏选项在跨浏览器时不起作用，所以真正使其按需运行的唯一方法是完全删除选项

我可以使用detach删除项目，但我不知道以后如何恢复它们。我知道我需要以某种方式将它们添加到数组中，但我不知道如何做到这一点如何使用数组从已删除列表中分离并仅还原特定匹配的项目？

这就是我一直在测试的内容：

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

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

                //found a match - show this entry
                if ( text.indexOf(searchString) > -1 ) {
                    $(this).removeAttr("disabled");
                    $(this).prependTo("#specs-excluded-select");                    
                }

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

视觉参考。过滤器框是由箭头标注的文本框

---

您可以这样处理：

---

你可以这样处理：

---

你可以这样处理：

---

你可以这样处理：

---

你应该提供一个更容易帮助的JSFIDLE是的，好主意：我清理了一些额外的东西并简化了它，这样它就可以帮助许多其他希望这样做的人：你应该提供一个更容易帮助的JSFIDLE是的，好主意：我清理了一些额外的东西，并对其进行了精简，这样它可以帮助许多其他希望这样做的人：你应该提供一个JSFIDLE，更容易帮助是的，好主意：我清理了一些额外的东西，并对其进行了精简，这样它可以帮助许多其他希望这样做的人：你应该提供一个JSFIDLE，更容易帮助是的，好主意：我清理了一些多余的东西，并对其进行了精简，这样它就可以帮助许多其他希望做同样事情的人：

var $opts = $("#specs-excluded-select>option"); // keeping there all options

$("#filter-specs-text").keyup(function () {
    var searchString = $(this).val().toLowerCase();
    $("#specs-excluded-select").empty().append($opts); // append() to keep any data/events bound to options
    $("#specs-excluded-select>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();
        }
    });

});