显示和隐藏SELECT变化动态创建的表行

我有一个Bootstrap模态弹出窗口，它可以动态填充从数据库创建的表格。它有一个SELECT元素，可以有可变数量的元素。该值包含季节代码。显示和隐藏SELECT变化动态创建的表行

随着表格的创建，每一行都会被赋予一个名为“季节”的类，其中添加了季节代码。最终的结果是，我们可以得到一个类列表看起来像这样：

1季 season2

等

下面是代码示例：

<select id="seaCombo"> 
    <option value="1">1 - Summer 2013</option> 
    <option value="2">2 - Fall 2013</option> 
    <option value="3">3 - Winter 2013</option> 
    <option value="4">4 - Spring 2013</option> 
    <option value="5">5 - Holiday 2013</option> 
</select> 

<table> 
    <tr class="season1"> 
    <td>Something here</td> 
    <tr> 
    <tr class="season2"> 
    <td>Something here</td> 
    <tr> 
    <tr class="season3"> 
    <td>Something here</td> 
    <tr> 
    <tr class="season4"> 
    <td>Something here</td> 
    <tr> 
    <tr class="season5"> 
    <td>Something here</td> 
    <tr> 
</table>

我想要显示在SELECT控件中选择的季节并隐藏所有其他项。问题是表和选择是动态的。因此，选择可能只有2个季节列出，这意味着桌子只有两个季节类别。选择可能有4个季节列出，这意味着桌子将只有4个季节类。

我该如何编写一些JQuery来显示所选季节的类，但隐藏了表中的所有其他类？

来源

2014-01-08 Michael Mahony

选项3,4和5的值是否正确？ – next2u

谢谢你的收获！我编辑帖子以反映正确的值。 –

试试这个，

$(function() { 
    $('#seaCombo').on('change', function() { 
     s = this.value; 
     $('tr').hide(); // first hide all rows 
     if ($('.season' + s).length) { // check the row-class exists or not 
      $('.season' + s).show(); // show only the seasonal row 
     } 
    }); 
});

Demo

来源

2014-01-08 05:03:20

这个完美的作品！谢谢！ –

这里有：

$(document).ready(function() { 
    function showProperSeason() { 
     var seasonNumber = $('#seaCombo').val(); //Get the season number selected 
     $('table tr').hide(); //Hide all rows 
     $('.season' + seasonNumber).show(); // show only the seasonal row   
    } 

    $('#seaCombo').change(showProperSeason); 
    showProperSeason(); 
});

演示：http://jsfiddle.net/edgarinvillegas/e4s2J/3/

这样你就会开始显示选定的季节，也当你改变选择。

干杯

来源

2014-01-08 05:10:26

显示和隐藏SELECT变化动态创建的表行

回答

相关问题