Question

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

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

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

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

Answer 2

你有：

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

这样，您最初会显示所选季节，也会更改选择。

干杯

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

2 个答案: