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