javascript - 显示和隐藏 SELECT 更改中动态创建的表行

Question

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

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

第一季第二季

等等

下面是代码示例:

<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 来显示所选季节的类(class)，但隐藏表中的所有其他类(class)？

Answer 1

试试这个，

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