Question

之前我曾问过如何做到这一点并被引导到此：

<script>
jQuery.fn.filterByText = function(textbox) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
                    options.push({value: $(this).val(), text: $(this).text()});
        });
        $(select).data('options', options);

        $(textbox).bind('change keyup', function() {
            var options = $(select).empty().scrollTop(0).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)
                    );
                }
            });
        });
    });
};
</script>

（http://www.lessanvaezi.com/filter-select-list-options/）

当我在选择框中使用此过滤器时，它会过滤未选择的AND和所选的。我希望它只过滤未选中的内容，因为如果用户想要再次修改选择和过滤器，之前选择的项目就会消失 - 除非它们符合过滤条件。

我在JavaScript或JQuery方面并不擅长，并且无法理解我如何告诉上面的脚本忽略“：selected”选项但是过滤所有其他选项。

如果它有帮助，这是一个小问题：http://jsfiddle.net/UmKXy/我希望选项一和二保持选中状态，并在用户开始输入时在列表中。

感谢您的帮助！

Answer 1

选择未选择的选项，请使用：

$('option:not[selected]')  or  $('#myselect > option:not[selected]')

删除它们，请使用：

$('option:not[selected]').remove();

在css中，:not过滤器与弯曲括号中的内容相反。并且[]是属性选择器。

所以:not[selected]表示：does not have an attribute whose key is "selected"

Answer 2

您所拥有的解决方案不适用于所选元素，因为他在开始时创建了一系列选项，然后将这些选项与正则表达式进行匹配（不考虑实际选择的内容）。我过去曾使用跨度来隐藏选项，并为您创建了一个示例，让您了解其工作原理。这是链接：http://jsfiddle.net/rD6wv/

这是代码

$(function() {
  $("#filterByText").bind('keyup',function(){
    var search = $.trim($(this).val());
    var regex = new RegExp(search,"gi");
    $("#filez").find('option').each(function(){
      if(!$(this).is(':selected')){
        if($(this).val().match(regex) === null) {
          $(this).wrap('<span>');
        }else if($(this).parent().is('span')){     
          $(this).parent().replaceWith($(this));
        }
      }
    });     
  });
});

您只需在文本框中键入时循环选择所有选项。然后你检查它是否被选中，如果你什么也没做，否则你检查它是否与搜索过滤器匹配，如果你将它包裹在一个范围内，使其不可见，否则这意味着你需要看到它，所以你检查它是否已经包裹在一个范围内，在这种情况下，你用选项替换它，这样你就可以再次看到它。

仅使用JQuery </select>过滤以前未选择的<select>选项

2 个答案: