如何显示表格行取决于使用jquery匹配选定的下拉框值

Question

我有两个多重下拉框，一个表和一个搜索按钮。 单击搜索按钮后，我想隐藏/显示表格行取决于所选下拉框的值是否匹配，我该怎么办？

JS：

    var array1 = [];
    var array2 = [];

    jQuery('#codexpl tr').each(function () {
    var $row = $(this);
    var $firstCell = $row.find('td:first');
    array1.push($firstCell.text());

    var $lastCell = $row.find('td:last');
    array2.push($lastCell.text());
    });

    var selectedBrandarr=[];
    var selectedStatusarr=[];
    $("#search").on('click', function () {

    /*search function*/

    $('.multiSel span').each(function (index) {  
    selectedBrandarr.push($(this).html().replace(/,/g, "")); 
    })

    $('.multiSel2 span').each(function (index) { 
    selectedStatusarr.push($(this).html().replace(/,/g, ""));
    })

    jQuery('#codexpl tr').each(function (index) {
    var $row = $(this);
    var $firstCell = $row.find('td:first'); 
    var $lastCell = $row.find('td:last');

    if($firstCell.text()==selectedBrandarr[index] && $lastCell.text() == selectedStatusarr[index] )
    {
    alert("yes");
$(this).css('display','block')
    }
    else{
 $(this).css('display','none')
    alert("not match");
    }

    });

    });

    $(".dropdown dt a").on('click', function () {
    $(".dropdown dd ul").slideToggle('fast');
    });

    $(".dropdown dd ul li a").on('click', function () {
    $(".dropdown dd ul").hide();
    });

    function getSelectedValuedropdownbox2(id) {
    return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function (e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
    });


    $('.mutliSelect input[type="checkbox"]').on('click', function () {

    var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
    title = $(this).val() + ",";

    if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
    $('.multiSel').append(html);
    $(".hida").hide();
    } else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".hida");
    $('.dropdown dt a').append(ret);

    }
    });

    /*-----------------------------*/

    $(".dropdown2 dt a").on('click', function () {
    $(".dropdown2 dd ul").slideToggle('fast');
    });

    $(".dropdown2 dd ul li a").on('click', function () {
    $(".dropdown2 dd ul").hide();
    });

    function getSelectedValuedropdownbox2(id) {
    return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function (e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown2")) $(".dropdown2 dd ul").hide();
    });

    $('.mutliSelect2 input[type="checkbox"]').on('click', function () {

    var title = $(this).closest('.mutliSelect2').find('input[type="checkbox"]').val(),
    title = $(this).val() + ",";

    if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
    $('.multiSel2').append(html);
    $(".hida2").hide();
    } else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".hida2");
    $('.dropdown2 dt a').append(ret);

    }
    });

Jsfiddle： http : //jsfiddle.net/3J2Ns/59/

Answer 1

我本来会寻求服务器端解决方案的，在那里您返回了搜索结果，并用结果替换了表。

如果出于某种原因要在前端手动进行此操作，则一种开箱即用的解决方案是为每个行类分配等于适用于该行的选择值的行。

还将所有这些类名存储为数组。

写一个隐藏所有类的函数，另一个显示所有类的函数。 例如：对于每个类都不显示；

然后编写一个将在搜索时显示的函数，如果两个选择都为空，则显示全部。

否则，全部隐藏，然后为每个选定的类别显示。

您的表格html应该是这样的（为所有行添加'result-row'类）：

<table ...>
    ...
   <tr class="Apple Active result-row">
      <td> Apple </td> 
      <td>Active</td>
   </tr>
    ... //repeat the same for every row
</table>

您已经使用了输入复选框，但尚未给它们指定名称。 您需要为每个组命名。 例如：

<input type="checkbox" value="Draft" name="option"/>
<input type="checkbox" value="Active" name="option"/>
<input type="checkbox" value="Motorola" name="option"/>

可以给它们全都相同的名称，因为出于您的目的，它们都将用于过滤相同的列表。 如果需要将它们分开，我将给每个组自己的名字。

在javascript中：

function hideAll() {
  $('.result-row').hide();
}

function showAll() {
  $('.result-row').show();
}

function showFiltered() {
   if ($('input[name="option"]:checked').length == 0) {
     showAll();
   }
   else {
     hideAll();
     $('input[name="option"]:checked').each(function() {
         $('.' + this.value).show();
     });
   }
}

单击任何复选框，调用函数showFiltered（）。 例如：

$('input[name="option"]').on('click', function () {
   showFiltered();
});

我已经部分更新了您的jsfiddle。 http://jsfiddle.net/3J2Ns/60/如果单击选择的品牌下拉列表并选择Apple，您会发现Blackberry和HTC行消失了。