使用select2框值过滤表

Question

I am trying to filter a table using multiple select2 boxes.

 jQuery(function() { jQuery('.js-example-basic-multiple').select2(); jQuery('.js-example-basic-multiple').on("select2:select", function(e) { var loc = $('.js-example-basic-multiple').val(); jQuery('#events-table td.hidden-location').removeClass('hidden-location'); jQuery('#events-table td:not(".' + loc + '")').addClass('hidden-location'); if (loc == 'all') { jQuery('#events-table tr').removeClass('hidden-location'); } }); }); 

 select { width: 300px; } tr { background: white; } td { border: 1px solid #555; } .hidden-location { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <select class="js-example-basic-multiple" multiple> <optgroup label="CS"> <option value="MSC5-x">MSC5</option> <option value="MSC6-x">MSC6</option> <option value="MSC7-x">MSC7</option> <option value="MSC8-x">MSC8</option> <option value="MSC9-x">MSC9</option> <option value="MSC10-x">MSC10</option> </optgroup> </select> <table id="events-table" class="table"> <thead> <tr> <th>ID</th> <th>MSC5</th> <th>MSC6</th> <th>MSC7</th> <th>MSC8</th> <th>MSC9</th> <th>MSC10</th> </tr> </thead> <tbody> <tr> <td>1</td> <td class="MSC5-x">X</td> <td class="MSC6-x">X</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>2</td> <td class="MSC5-x">X</td> <td class="MSC6-x">X</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>3</td> <td class="MSC5-x">X</td> <td></td> <td></td> <td></td> <td></td> <td class="MSC10-x">X</td> </tr> <tr> <td>4</td> <td class="MSC5-x">X</td> <td class="MSC6-x">X</td> <td></td> <td></td> <td class="MSC9-x">X</td> <td></td> </tr> <tr> <td>5</td> <td></td> <td class="MSC6-x">X</td> <td></td> <td class="MSC8-x">X</td> <td></td> <td></td> </tr> </tbody> </table> 

and now I want to use the multiple selected value to filter an external table, seems not working properly, please check on this site example instead of the below one, may the jsfiddle can present my question more clear how i can fix this issue?

just modified something, seems better, but still not working correctly

Answer 1

首先使用jquery cdn链接，而不使用此文件/select2.min.js，最后使用jquery函数。