List.js過濾結果

我使用list.js（http://listjs.com/）從下拉列表中創建過濾器。List.js過濾結果

<div id="viewList"> 
<input class="search" placeholder="Search" /> 
<form id="filter"> 
    <select id ="gname" name="gname"> 
     <option value="0">css</option> 
     <option value="1">tf2</option> 
     <option value="2" >teamspeak3</option> 
     <option value="3" >csgo</option> 
     <option value="3" >gmod</option> 
    </select> 
    <select id ="sloc" name="sloc"> 
     <option value="0">US</option> 
     <option value="1" >EU</option> 
    </select> 
</form> 
<button id="filter-results" type="button">Filter Results</button> 
<table width="891" align="center" cellspacing='0'> 
<thead> <!-- cellspacing='0' is important, must stay --> 
    <tr> 
     <th class="sort" data-sort="sname" width="350" >Server Name</th> 
     <th class="sort" data-sort="gname" style="padding:0px 0px 0px 0px">Game</th> 
     <th class="sort" data-sort="sloc" style="padding:0px 0px 0px 0px">Loc</th> 
     <th class="sort" data-sort="ipadd" width="204">IP Address</th> 
     <th class="sort" data-sort="numply" width="91">Players</th> 
     <th width="258">Map</th> 
     <th></th> 
    </tr> 
</thead> 
<!-- Table Header --> 
<tbody class="list"> 
    <tr> 
     <td class='sname'>[GFLClan.com]Minigames :: FastDL, Store, and more!</td> 
     <td class='gname'><a title='css'><img src='Flags/css.png'/></a></td> 
     <td class='sloc'><img src='Country/US.png'/></td> 
     <td class='ipadd'>74.91.119.32:27015</td> 
     <td class='numply'>14/40</td> 
     <td class='mapn'>mg_ski_mountain_dev</td> 
     <td><a href='steam://connect/74.91.119.32:27015' title='Join!'><img src='button/join.gif'/> 
    </td> 
    <tr> 
     <td class='sname'>[GFLClan.com] *MarioKart* 2+3 | Instant Respawn | No Lag</td> 
     <td class='gname'><a title='tf2'><img src='Flags/tf2.png'/></a></td> 
     <td class='sloc'><img src='Country/US.png'/></td> 
     <td class='ipadd'>74.91.115.139:27015</td> 
     <td class='numply'>15/32</td> 
     <td class='mapn'>dm_mariokart2_b3</td> 
     <td><a href='steam://connect/74.91.115.139:27015' title='Join!'><img src='button/join.gif'/></td> 
    </tr> 
</tbody>

使用這個JavaScript

var options = { 
    valueNames: [ 'sname', 'gname', 'sloc', 'ipadd', 'numply', 'mapn' ] 
}; 

var featureList = new List('viewList', options); 

$('#filter-results').click(function() { 
    featureList.filter(function(item) { 
     var gname = $("#gname").text(); 
     var sloc = $("#sloc").text(); 
     if (item.values().gname == gname && item.values().sloc == sloc) { 
      return true; 
     } else { 
      return false; 
     } 
    }); 
    return false; 
    });

過濾器不起作用。我想要做的是讓用戶使用下拉菜單僅顯示他們需要的結果。因此，如果他們選擇css和美國，它應該只顯示gname tds'css'和sloc tds'美國'in。我不知道它不起作用的原因是因爲我在gname中使用圖像和sloc類。有誰知道如何讓這個工作？

來源

2014-10-04 david saji

相反的，

$("#gname").text();

你應該使用

$("#gname option:selected").text();

來源

2014-12-15 10:18:23

List.js過濾結果

回答

相關問題