jquery show hide tr по выбору опции

Question

Моя цель - показать/скрыть tr по выбору.

У меня есть <select> с id="selcat" и стол с id="maplist". Элемент управления select <options> генерируется из набора записей MySQL и отображает все по умолчанию.

(в исходном коде мои варианты знач то, что они, кажется)

Теперь я хочу, чтобы фильтровать это без обновления страницы с помощью JQuery.

Я попытался это:

$('select#selcat').change(function() { 
    $("#maplist tr").hide().filter($(this).val()).show(); 
}).change(); 
}); 

Но все тр являются прячась с этим кодом и мне было интересно, что это неправильно.

Answer 1

Возьмем следующий HTML:

<select id="selcat"> 
    <option value="[data-val='a']">A</option> 
    <option value="[data-val='b']">B</option> 
    <option value="[data-val='c']">C</option> 
</select> 

<table id="maplist"> 
    <tr data-val="a"><td>A</td></tr> 
    <tr data-val="a"><td>A</td></tr> 
    <tr data-val="b"><td>B</td></tr> 
    <tr data-val="b"><td>B</td></tr> 
    <tr data-val="c"><td>C</td></tr> 
</table> 

Тогда ваш JQuery должен работать:

$('select#selcat').change(function() { 
    $("#maplist tr").hide().filter($(this).val()).show(); 
}).change(); 

Я думаю, что вы отправляете неправильное значение фильтра в вашем коде, поэтому люди хотели см. ваш HTML.

Смотрите эту скрипку: http://jsfiddle.net/8jwsj/