Question

我在第一行有一个带有下拉html选择器的表。第一个选项是空白。

我需要隐藏表中除了与选择器值匹配的行之外的所有行。如果选择了第一个选项 - 隐藏下面的所有行。我为TR使用类的原因，因为某些匹配选项可能有多行。

JS

$("#mySelector").change(function(){
    opt = $(this).val();
    if(opt != "") {
        $("." + opt).show();
    } else {
        $("#myTbl tr:not(first-child)").hide(); 
    }
});

HTML

<table id="myTbl">
<tr>
   <td>
    <select id="mySelector">
    <option> select one
    <option value="val1"> v1
    <option value="val2"> v12
    <option value="val3"> v3
    </selector>
   </td>
</tr>
<tr class="val1">
   <td>
    asdasd 1
   </td>
</tr>

<tr class="val2">
   <td>
    asdasd 2
   </td>
</tr>

<tr class="val3">
   <td>
    asdasd 3
   </td>
</tr>
</table>

它似乎应该有效，但事实并非如此。我错过了什么？

Answer 1

您错过:之前的first-child

$("#myTbl tr:not(:first-child)").hide();

Answer 2

$("#myTbl tr:not(:eq(0))").hide();

或者：

$("#myTbl tr:not(:first)").hide();

您需要为第一个<option>添加值属性：

<select id="mySelector">
<option value=""> select one // <<<<======
<option value="val1"> v1
<option value="val2"> v12
<option value="val3"> v3
</select> // Not </selector>

Live DEMO

请注意opt = $(this).val();
应this.value好看，清晰，干净，快捷。

Answer 3

尝试以下内容，

$("#mySelector").change(function(){
    var opt = $(this).val();
    if(opt != "") {
        $("." + opt).show();
    } else {
        $("#myTbl tr:gt(0)").hide(); 
    }
});

使用jQuery隐藏除第一个表行之外的所有行

3 个答案: