根据下拉选择显示/隐藏表行

squ*_*c77 1 jquery html-table rows show hide

我有一个2012年和2013年的日期选择器.根据选择,我想只显示具有某些类的行.有人可以告诉我哪里出错了吗?

jQuery的

<script>
$(document).ready(function() {
$(".yr12 td").hide();

$('#selectYr').change(function () {
    var val = $(this).val();
    if (val == yr12) {
         $('.yr12 td').show();
         $('.yr13 td').hide();
    } else {
        $('.yr12 td').hide();
         $('.yr13 td').show();
    }
    });
});
Run Code Online (Sandbox Code Playgroud)

HTML

<select id="selectYr">
    <option value="yr13">2013</option>
     <option value="yr12">2012</option>
   </select>
<br><br>

<table>
<tr>
<th>Date</th>
<th>Description</th>
</tr>
<tr class="yr13">
<td>February 2013 </td>
<td>Description 1</td>
</tr>
<tr>
<td class="yr13">January 2013</td>
<td>Description 2</td>
</tr>
<tr class="yr12">
<td>November 2012</td>
<td>Description 3</td>
</tr>
<tr class="yr12">
<td>December 2012</td>
<td>Description 4</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)

Jos*_*ber 5

你错过了字符串周围的引号:

if (val == 'yr12') { }
//         ^    ^
Run Code Online (Sandbox Code Playgroud)