Question

到目前为止，我的代码工作正常但是当我选择empty select option时，我的表中的所有行都应该是可见的（换句话说，将表重置为初始状态）。我该怎么做？

我已经看过这个（JQuery Selector for table with hidden row - alternate row colouring），但不适用于我的结构。

由于

JQUERY：

    $(document).ready(function()
    {
        $("#cars").change(function()
        {
            var selected = $(this).val();

            if (selected != '')
            {
                var values = $.map($('#cars>option'), function(e) { return e.value; });

                values.forEach(function(item)
                {
                    if (item != '')
                    {
                        if (selected == item)
                        {
                            $('.' + item).show();
                        }
                        else
                        {
                            $('.' + item).hide();
                        }
                    }
                    else
                    {
                        //Show all rows
                    }
                });
            }
        });
    });

HTML：

<table border="1">
            <tr id="header">
                <td>1</td>
                <td><select id="cars">
                    <option value=""></option>
                    <option value="bmw">BMW</option>
                    <option value="audi">AUDI</option>
                    <option value="mercedes">MERCEDES</option>
                </select></td>
            </tr>
            <tr class="bmw">
                <td>3.16</td>
                <td>BMW</td>
            </tr>
            <tr class="bmw">
                <td>3.18</td>
                <td>BMW</td>
            </tr>
            <tr class="bmw">
                <td>3.00</td>
                <td>BMW</td>
            </tr>
            <tr class="audi">
                <td>A1</td>
                <td>AUDI</td>
            </tr>
            <tr class="audi">
                <td>A3</td>
                <td>AUDI</td>
            </tr>
            <tr class="mercedes">
                <td>300sel</td>
                <td>MERCEDES</td>
            </tr>
        </table>

Answer 1

<强> Working Fiddle
在代码中添加 else 部分

else {
    $('table tr').show();
}

Answer 2

放下这个：

$(this).closest('table').find('tr:hidden').show();

虽然您可以像这样简化代码：

$("#cars").change(function(){
   $(this).closest('table').find('tr:gt(0)').hide();
   this.value !== '' ? $('.'+this.value).show() : $(this).closest('table').find('tr:hidden').show();
});

Answer 3

您的代码不必要地复杂。您不需要map，foreach等

$("#cars").change(function()
 {
   $('tr[id!=header]').hide()
   if (this.value)
     $('.' + this.value).show()
   else
     $('tr').show()
  }
)

在选择框中选择空选项时显示所有隐藏的表行

3 个答案: