根據下拉選擇顯示/隱藏表格行

我有2012年的日期選擇器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(); 
    } 
    }); 
});

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>

來源

2013-01-31 squirc77

你錯過了周圍的字符串引號：

if (val == 'yr12') { } 
//  ^^

來源

2013-01-31 18:56:14

o.mi.gosh。因缺少報價而丟失的時間。我謝謝你！ – squirc77

您正在嘗試比較VA升另一個變量稱爲yr12代替比較值 '年12'

這裏是正確的代碼：

$(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(); 
        } 
        }); 
       });

來源

2013-01-31 18:59:33 MikeB

兩件事..

1 - >

<tr> 
<td class="yr13">January 2013</td>

應該是

<tr class="yr13"> 
<td>January 2013</td>

2→

if (val == "yr12") {

來源

2013-01-31 19:03:07 arun

根據下拉選擇顯示/隱藏表格行

回答

相關問題