列显示/隐藏复选框选择使用jQuery

Question

我正在处理.NET MVC项目中的列过滤器。我的要求是，在下拉控件中，所有表格标题列名将与复选框绑定。默认情况下，所有选项都被选中。当我从下拉菜单中取消选择任何选项时，它将反映到表格数据中，并且该列将不会显示。

我写了一些代码，但无法实现复选框功能。请帮帮我。如果jquery插件可用，这也对我有帮助。

JsFiddle DEMO

代码

$("#myOptions").change(function() { 
     selectedVal = $.trim($("#myOptions option:selected").text()); 
    var i = $("#myTable thead .headercell td:contains(" + selectedVal + ")").index() + 1; 
    $('td:nth-child(' + i+ ')').toggle(); 
    }); 

Answer 1

我想你想的多选择更方便：使用select2：

$("#myOptions").select2({ 
 
    tags: true 
 
}).change(function() { 
 
    var test = $("#myOptions").val(); 
 
    $("td").show(); 
 
    for (var j = 0, len = test.length; j < len; j++) { 
 
    $('td:nth-child(' + test[j] + ')').hide(); 
 
    } 
 

 
});

body{font-family:calibri;} 
 
    table { padding: 0; border-collapse: collapse; } 
 
    table thead td { background-color: #f2f2f2; font-weight:bold;} 
 
    table td { border: 1px solid #d7d7d7; padding: 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 

 
<select id="myOptions" multiple="multiple" style="width:100%"> 
 
    <option value="1">Name</option> 
 
    <option value="2">Address</option> 
 
    <option value="3">City</option> 
 
    <option value="4">Country</option> 
 
</select> 
 
<table id="myTable" cellspacing="0" cellpadding="0"> 
 
    <thead> 
 
    <tr class="headercell"> 
 
     <td>Name</td> 
 
     <td>Address</td> 
 
     <td>City</td> 
 
     <td>Country</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="datacell"> 
 
     <td>Anand</td> 
 
     <td>2404/71</td> 
 
     <td>Mohali</td> 
 
     <td>India</td> 
 
    </tr> 
 
    <tr class="datacell"> 
 
     <td>Nilesh</td> 
 
     <td>236/10</td> 
 
     <td>Chandigarh</td> 
 
     <td>India</td> 
 
    </tr> 
 
    <tr class="datacell"> 
 
     <td>Rahul</td> 
 
     <td>A 71 Radhepuri</td> 
 
     <td>New Delhi</td> 
 
     <td>India</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Pratius</td> 
 
     <td>Trishna Apartment-740</td> 
 
     <td>Hydrabad</td> 
 
     <td>India</td> 
 
    </tr> 
 
    </tbody> 
 
    </table>