列顯示/隱藏複選框選擇使用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>