2

我在第一行有一个带有下拉 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>

似乎它应该工作，但它没有。我错过了什么？

4

3 回答 3

8

你错过了:以前first-child

$("#myTbl tr:not(:first-child)").hide();
于 2012-05-10T21:46:57.517 回答
3 
$("#myTbl tr:not(:eq(0))").hide();

或者：

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

您需要向第一个添加 value 属性<option>：

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

现场演示

请注意，它opt = $(this).val();
应该是this.value 好的、清晰的、干净的和更快的。

于 2012-05-10T21:46:44.140 回答
3

试试下面的东西，

$("#mySelector").change(function(){
    var opt = $(this).val();
    if(opt != "") {
        $("." + opt).show();
    } else {
        $("#myTbl tr:gt(0)").hide(); 
    }
});
于 2012-05-10T21:48:12.633 回答