Question

我正在尝试使用JQuery创建一个可过滤的表。我的JQuery选择器适用于我的INPUT元素，但不适用于我的SELECT元素，我不明白为什么 - 他们使用相同的逻辑。

这里的想法是我们在表格的顶部观察过滤字段以进行输入。一旦我们看到该输入，我们就会选择该列中的行，这些行不包含在过滤器字段中键入的数据并隐藏它们。

function FilterEverything() {
  $("TR").show();
  if ($("#NumbersFilter").val()) {
    $("input.NumbersData:not([value*='" + $("#NumbersFilter").val() + "' i])").parent().parent().hide();
  }
  if ($("#LettersFilter").val()) {
    $("input.LettersData:not([value*='" + $("#LettersFilter").val() + "' i])").parent().parent().hide();
  }
  if ($("#ColorsFilter").val()) {
    $("select.ColorsData:not([value*='" + $("#ColorsFilter").val() + "' i])").parent().parent().hide();
  }
  $("TR.Header").show();
};
$('#NumbersFilter').bind('input propertychange', function() {
  FilterEverything();
});

$('#LettersFilter').bind('input propertychange', function() {
  FilterEverything();
});

$('#ColorsFilter').bind('input propertychange', function() {
  FilterEverything();
});

为什么输入和选择而不仅仅是DIV？

此处未包含其他jquery语句，可以查看这些字段以进行更改和更新数据库。

Answer 1

替换

$("select.ColorsData:not([value*='" + $("#ColorsFilter").val() + "' i])").parent().parent().hide();

与

  $("select.ColorsData option:checked").not("[value*='" + $("#ColorsFilter").val() + "']").parent().parent().parent().hide();

JSFiddler

或

var colorsFilterValue = $("#ColorsFilter").val();  
$("select.ColorsData").each(function(i,o) {
  var v = $(o).val();
  if (!v.startsWith(colorsFilterValue))    {
    $(o).parent().parent().hide();
  }    
});

JSFiddler

说明：这将迭代嵌套在select元素中的每个选项。

$("select.ColorsData:not([value*=...])")

JQuery Selector在SELECT元素上过于激进

1 个答案: