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

Question

http://jsfiddle.net/Ms9NY/

我正在使用 jquery 并尝试使用分离/前置/附加来动态删除和重新插入选择上的选项项。

由于隐藏选项无法跨浏览器工作，因此真正使其按需要发挥作用的唯一方法是完全删除选项。

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

这是我一直在测试的:

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

});