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 に答える