使用JQuery分离和恢复来过滤选择列表

Question

http://jsfiddle.net/Ms9NY/

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

因为隐藏选项不能跨浏览器工作，所以真正让它按需运行的唯一方法就是完全删除选项。

我可以通过分离删除这些项目，但是我以后如何恢复它们会丢失。我知道我需要以某种方式将它们添加到数组中，但我无法弄清楚如何做到这一点。 如何使用数组从已删除的列表中仅分离和恢复特定匹配的项？

这是我一直在测试的：

$("#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();
                }
        });

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

Answer 1

你可以这样处理它：

--DEMO--

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

});