Question

我使用此代码过滤我的<select>菜单：

jQuery.fn.filterByText = function(textbox) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').not('option:first-child').each(function() {
            options.push({value: $(this).val(), text: $(this).text(), rel: $(this).attr('rel')});
        });
        $(select).data('options', options);

        $(textbox).bind('change keyup', function() {
            var options = $(select).empty().data('options');
            var search = $.trim($(this).val());
            var regex = new RegExp(search,"gi");

            $.each(options, function(i) {
                var option = options[i];
                if(option.text.match(regex) !== null) {
                    $(select).append(
                        $('<option>').text(option.text).val(option.value)
                    );
                }
            });
        });
    });
};

如您所见，我使用.not('option:first-child')排除了第一个<option>代码。

我对此代码有2个问题，它运行正常，但我需要在我的过滤中包含rel属性，并且当我清除时我想重新添加option:first-child文本框。

我已将rel: $(this).attr('rel')添加到我的options数组中，但我不确定如何将其添加回过滤结果？

我可以创建var original = [];并将所有原始值推入其中吗？

Answer 1

要在过滤中包含rel属性，您几乎完成了这项工作。只需添加 .attr('rel', option.rel) ：

即可

$('<option>').text(option.text).val(option.value).attr('rel', option.rel)

不是重新添加第一个option，而是可以保留它，并删除其他内容：

$(select).children("option").not(":first").remove();

修改 （如何检索“数据”属性）：

你可以这样做（使用变量缓存可以改进）：

var options = $(select).data('options');
$(select).children("option").not(":first").remove();

或者像这样，保持可链接性：

var options = $(select).children("option:not(:first)").remove().end().data('options');

编辑回答

$(select).children("option").not(":first")
$(select).find('option').not('option:first-child')

孩子VS发现：

.children（）方法与.find（）的区别仅在于.children（）在.sind（）可以遍历时沿DOM树向下移动一个级别在多个级别选择后代元素（孙子，等）。

由于options是select元素的直接子元素，因此最好使用children（）。

：第一个VS：第一个孩子

：第一个伪类相当于：eq（0）。它也可能是写作：lt（1）。虽然这只匹配一个元素，：第一个孩子可以匹配多个：每个父母一个。

我们只有一个父母（我们的select）。所以都在这里工作。 但请注意：

因为：首先是jQuery扩展而不是CSS的一部分规范，查询使用：首先不能利用本机DOM querySelectorAll（）提供的性能提升方法。使用时达到最佳性能：首先选择元素，首先使用纯CSS选择器选择元素使用.filter（“：first”）（或此处，.not（“：first”））。

通常，这取决于具体情况/背景。

Answer 2

尝试这样的属性：

attr('rel', option.rel)

不需要$('select').data('option')，因为您将它们存储在数组中。使用对象caching，无需包装3次选项即可获得3个值。

演示它的外观：http://jsfiddle.net/BSDdZ/

jQuery Filter选择具有rel值的Menu

2 个答案: