Javascript 用于筛选特定列上的行的下拉列表

我有一个函数，可以根据您在下拉列表中选择的内容过滤表格。但现在它过滤了整行。我需要每个dropdownlist过滤一个特定的列

我尝试为每个

选项调用
filter
函数：selected

，但不起作用。我不知道如何使用我已经拥有的函数来实现这一点

这是一个例子。我需要第一个下拉列表在第一列进行筛选，第二个下拉列表在第三列进行筛选。
如果选择

wood

和

green

，则应仅在第一列显示

wood

、第三列显示

green

的行

$(document).ready(function () {

    $('.filter').change(function () {
        var values = [];
        $('.filter option:selected').each(function () {
            if ($(this).val() != "") values.push($(this).text());
        });
        filter('table > tbody > tr', values);
    });

    function filter(selector, values) {
        $(selector).each(function () {
            var sel = $(this);
            var hide = false;
            $.each(values, function (i, val) {
                if (sel.text().search(new RegExp("\\b"+val+"\\b")) < 0) hide = true;
            });
            hide ? sel.hide() : sel.show();
        });
    }
});

$（文档）.ready（函数（）{
$（'.filter'）.change（函数（）{
var值=[]；
$（'.filter选项：选定'）。每个（函数（）{
if（$（this.val（）！=“”）值.push（$（this.text（））；
});
过滤器（'表>正文>tr'，值）；
});
函数过滤器（选择器、值）{
$（选择器）。每个（函数（）{
var sel=$（本）；
var hide=false；
$.each（值、函数（i、val）{
if（sel.text（）.search（new RegExp（“\\b”+val+“\\b”））<0）hide=true；
});
隐藏？sel.hide（）：sel.show（）；
});
}
});

html

没有一个
木材
没有一个
蓝色
绿色
红色
木头来自树木
11
蓝色
有些木头是硬的
512
绿色
有些人喜欢木制品
51
红色
有些木头是绿色的
12
蓝色

我对您的示例做了一些更改，它似乎很有效（新版本）

我改变了过滤方法，现在的方法是检查这个词被发现了多少次，希望这能有所帮助

HTML我为保存列索引的select元素添加了

数据列

<select class="filter" data-col="0">
    <option value="">None</option>
    <option value="a">wood</option>
</select>
<select class="filter" data-col="2">
    <option value="">None</option>
    <option value="1">blue</option>
    <option value="2">green</option>
    <option value="2">red</option>
</select>


没有一个
木材
没有一个
蓝色
绿色
红色

和新的js代码

$(document).ready(function () {

$('.filter').change(function () {
    var values = [];

     $('.filter').each(function () {
        var colIdx = $(this).data('col');

         $(this).find('option:selected').each(function () {
             if ($(this).val() != "") values.push( {
                text: $(this).text(),
                colId : colIdx
             });
        });
    });
    filter('table > tbody > tr', values);
});

function filter(selector, values) {console.log(values);
    $(selector).each(function () {
        var sel = $(this);
        var tokens = sel.text().trim().split('\n');
        var toknesObj = [], i;
        for(i=0;i<tokens.length;i++){
            toknesObj[i] = {
               text:tokens[i].trim(), 
               found:false
            };
        }

        var show = false;
        //console.log(toknesObj);
        $.each(values, function (i, val) {                

       if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
           toknesObj[val.colId].found = true;
          }

        });          
        console.log(toknesObj);
        var count = 0;
         $.each(toknesObj, function (i, val) {
             if (val.found){
                 count+=1;
             }
         });
        show = (count === values.length);        
        show ? sel.show() : sel.hide();
    });
}
});

$（文档）.ready（函数（）{
$（'.filter'）.change（函数（）{
var值=[]；
$（'.filter'）。每个（函数（）{
var colIdx=$（this）.data（'col'）；
$（this）.find（'option:selected'）。每个（函数（）{
if（$（this.val（）！=“”）值。推送（{
text:$（this）.text（），
科立德：科立德
});
});
});
过滤器（'表>正文>tr'，值）；
});
函数过滤器（选择器，值）{console.log（值）；
$（选择器）。每个（函数（）{
var sel=$（本）；
var tokens=sel.text（）.trim（）.split（'\n'）；
var toknesObj=[]，i；
对于（i=0；i=0）{
toknesObj[val.colId].found=true；
}
});          
控制台日志（toknesObj）；
var计数=0；
$。每个（toknesObj，函数（i，val）{
如果（找到值）{
计数+=1；
}
});
显示=（计数==值.length）；
show？sel.show（）：sel.hide（）；
});
}
});
谢谢，但这并不针对第一列的第一个下拉列表或第二列的第三列下拉列表。这里的例子：嗯，你是对的，所以我制作了一个新版本，我想现在这个看起来很有用=）我现在就用这个。非常感谢。很好的解决方案。快速跟进问题。有没有办法将此帐户用于
colspan
？
$(document).ready(function () {

$('.filter').change(function () {
    var values = [];

     $('.filter').each(function () {
        var colIdx = $(this).data('col');

         $(this).find('option:selected').each(function () {
             if ($(this).val() != "") values.push( {
                text: $(this).text(),
                colId : colIdx
             });
        });
    });
    filter('table > tbody > tr', values);
});

function filter(selector, values) {console.log(values);
    $(selector).each(function () {
        var sel = $(this);
        var tokens = sel.text().trim().split('\n');
        var toknesObj = [], i;
        for(i=0;i<tokens.length;i++){
            toknesObj[i] = {
               text:tokens[i].trim(), 
               found:false
            };
        }

        var show = false;
        //console.log(toknesObj);
        $.each(values, function (i, val) {                

       if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
           toknesObj[val.colId].found = true;
          }

        });          
        console.log(toknesObj);
        var count = 0;
         $.each(toknesObj, function (i, val) {
             if (val.found){
                 count+=1;
             }
         });
        show = (count === values.length);        
        show ? sel.show() : sel.hide();
    });
}
});