使用select选项值进行过滤表的可用问题

时间:2014-04-21 22:21:41

标签: jquery footable

我正在使用Footable.js(加上你需要的所有其他js文件才能使它工作)并且看起来都很棒但是当我使用我的下拉列表(选择选项值)过滤器来过滤表格时,只有第3列只有7个10选择工作。我检查了所有这些拼写。不知道为什么其中3个不起作用并像其他7个那样过滤表。

搜索过滤器

Search: <input id="filter" type="text"/></div>
   <div id="degree-bar">Type of Degree: <select class="filter-status">
    <option></option>
    <option value="certificate">Certificate</option>
    <option value="minor">Minor</option>
    <option value="associate">Associate</option>
    <option value="bachelor's">Bachelor's</option>
    <option value="bachelor's/master's">Bachelor's/Master's</option>
    <option value="licensure">Licensures</option>
    <option value="occupational">Occupational endorsements</option>
    <option value="post-baccalaureate">Post-baccalaureate licensure</option>
    <option value="special">Special training programs</option>
    <option value="pre-professional">Pre-professional opportunities</option>
  </select>

表格的一部分:它将分类学士学位,助理和证书,但不是特殊或职业。

<tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/yupik_lang_culture.html">Yup'ik Language and Culture</a></td>
      <td><a href="http://www.uaf.edu/anlc/classes/">College of Liberal Arts</a></td>
      <td><span title="bachelor's">bachelor's</span></td>
    </tr>
     <tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/yupik_lang.html">Yup'ik Language Proficiency</a></td>
      <td><a href="http://www.uaf.edu/anlc/classes/">College of Liberal Arts</a></td>
      <td><span title="certificate">certificate</span>, <span title="associate">associate</span></td>
    </tr>
     <tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/alaska_law_enforcement.html">Law Enforcement Academy</a></td>
      <td><a href="http://www.ctc.uaf.edu/programs/lawacad/">College of Rural and Community Development</a></td>
      <td><span title="special">special training program</span></td>
    </tr>
     <tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/paramedic.html">Paramedic Academy</a></td>
      <td><a href="http://www.ctc.uaf.edu/programs/paramedic/">College of Rural and Community Development</a></td>
       <td><span title="special">special training program</span></td>
    </tr>
     <tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/wm_tech.html">Welding and Materials Technology</a></td>
      <td><a href="http://www.ctc.uaf.edu/programs/weld/">College of Rural and Community Development</a></td>
      <td><span title="special">special training program</span></td>
    </tr>
     <tr>
      <td><a href="http://www.uaf.edu/catalog/current/programs/admin_assist.html">Administrative Assistant</a></td>
      <td><a href="http://www.ctc.uaf.edu/programs/aaa/">College of Rural and Community Development</a></td>
      <td><span title="occupational">occupational endorsement</span></td>
    </tr>

要看到它的实际效果: Webpage complete

1 个答案:

答案 0 :(得分:1)

根据您发布的代码,问题似乎是问题所在&#39;在期权和期限值的末尾。

选项值是:(注意代言和节目结束时的&#39;&nbsp;&#39;

<option value="occupational">Occupational endorsements</option>
<option value="special">Special training programs</option>

行中的跨度值如下所示:(注意在代言和程序结束时没有&#39;&#39;

<span title="special">occupational endorsement</span>
<span title="special">special training program</span>

这是一个证明问题的插件:(我在两个地方放了一个&#39; s) http://plnkr.co/edit/yCmyoJmFpkzcUplaMgVg