JQuery Selector对SELECT元素过度挑剔

Question

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

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

JSFiddle here

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*=...])")