Javascript 显示和隐藏通过选择更改动态创建的表行

我有一个引导模式弹出窗口，动态填充从数据库创建的表。它有一个SELECT元素，该元素可以具有可变数量的元素。该值包含季节代码

创建表时，每一行都会被赋予一个名为“季节”的类，并附加季节代码。最终结果是，我们可以得到一个如下所示的类列表：

第一季 第二季

等等

下面是一个代码示例：

<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>

1-2013年夏季
2-2013年秋季
3-2013年冬季
4-2013年春季
5-2013年假日
这里有东西
这里有东西
这里有东西
这里有东西
这里有东西

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

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

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

这里有：

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

演示：

这样，您将首先显示所选的季节，以及更改所选的季节

---

干杯

选项3、4和5的值是否正确？谢谢您的帮助！我编辑了这篇文章以反映正确的价值观。