Скрытие всего, кроме первой строки таблицы с jQuery

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(); 
    } 
});