Question

我使用list.js（http://listjs.com/）从下拉列表中创建过滤器。

<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和US，它应该只显示gname tds和＆＃39; css＆＃39;和＆＃39;美国＆＃39; in。我不知道它不起作用的原因是因为我在gname和sloc类中使用图像。有谁知道如何让这个工作？

Answer 1

而不是，

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

你应该使用

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

List.js过滤结果

1 个答案: