javascript - 选择选项以触发表格外观

Question

我有一个包含两列的表格。我有一个选择选项下拉框。表格行有 6 个不同的值，对应于一种颜色，绿色表示好，红色表示不好，等等。我想要完成的是当用户加载页面时所有值都存在。然后，当用户从下拉框中选择一个值时，除所选值外的所有内容都会消失。

我的Javascript

 function select_mem() {
        if ($("select[name='status-type']").val() == "all") {

            $('.num-good').show();
            $('.num-not').show();
            $('.num-not-working').show();
            $('.num-bad').show();
            $('.num-blue').show();

        }
  if ($("select[name='status-type']").val() == "good") {

            $('.num-good').show();
            $('.num-not').hide();
            $('.num-not-working').hide();
            $('.num-bad').hide();
            $('.num-blue').hide();

        }
 if ($("select[name='status-type']").val() == "bad") {

            $('.num-good').hide();
            $('.num-not').hide();
            $('.num-not-working').hide();
            $('.num-bad').show();
            $('.num-blue').hie();

        }
  if ($("select[name='status-type']").val() == "not-working") {

            $('.num-good').hide();
            $('.num-not').hide();
            $('.num-not-working').show();
            $('.num-bad').hide();
            $('.num-blue').hide();

        }
 if ($("select[name='status-type']").val() == "not") {

            $('.num-good').hide();
            $('.num-not').show();
            $('.num-not-working').hide();
            $('.num-bad').hide();
            $('.num-blue').hide();

        }
 if ($("select[name='status-type']").val() == "blue") {

            $('.num-good').hide();
            $('.num-not').hide();
            $('.num-not-working').hide();
            $('.num-bad').hide();
            $('.num-blue').show();

        }

    }

我的 HTML

    <section class="filter">

        <p>Filter your search: <select id ="options" name="status-type" onChange="select_num()">
            <option id="all" value="all">All Numbers</option>
            <option id="good" value="good">Good Numbers</option>
            <option id="bad" value="bad">Bad Numbers</option>
            <option id="not-working" value="not-working">Not Working Numbers</option>
            <option id="not" value="not">Non Numbers</option>

        </select></p> 
    </section>

    <!-- Valid Numbers -->
    <table>
<thead>
<tr>
    <th>Number</th>
    <th>Status</th>

</tr>
</thead>
<tbody>

<tr class="num-good">
    <!-- Number -->
    <td>+1 (941) 888-888</td>
    <!-- Status -->
    <td>Good</td>
</tr>
<tr class="num-good">
    <!-- Number -->
    <td>+1 (941) 888-888</td>
    <!-- Status -->
    <td>Good</td>
</tr>
<tr class="num-not">
    <!-- Number -->
    <td>+1 (941) 888-888</td>
    <!-- Status -->
    <td>Not</td>
</tr>
<tr class="num-not-working">
    <!-- Number -->
    <td>+1 (941) 888-888</td>
    <!-- Status -->
    <td>Not Working</td>
</tr>
<tr class="num-not">
    <!-- Number -->
    <td>+1 (941) 888-888</td>
    <!-- Status -->
    <td>Not</td>
</tr>
<tr class="num-bad">
    <!-- Number -->
    <td>+1 (941) 888-888</td>
    <!-- Status -->
    <td>Bad</td>
</tr>
<tr class="num-bad">
    <!-- Number -->
    <td>+1 (941) 888-888</td>
    <!-- Status -->
    <td>Bad</td>
</tr>
<tr class="">
    <!-- Number -->
    <td>+1 (941) 888-888</td>
    <!-- Status -->
    <td>Not a number</td>
</tr>
<tr class="blue">
    <!-- Number -->
    <td>+1 (941) 888-888</td>
    <!-- Status -->
    <td>Blue</td>
</tr>
<tr class="blue">
    <!-- Number -->
    <td>+1 (941) 888-888</td>
    <!-- Status -->
    <td>Blue</td>
</tr>
<tr class="num-good">
    <!-- Number -->
    <td>+1 (941) 888-888</td>
    <!-- Status -->
    <td>Good</td>
</tr>


</tbody>

我当前的代码可以在 jsFiddle 上找到:http://jsfiddle.net/hodhLyw1/1/

我正在尝试使用 jQuery，但如果有更好的纯 Javascript 方法，我会更喜欢它。在此先感谢您的帮助。

Answer 1

可以将所有重复的代码简化为:

var $rows = $('tbody tr'); // cache all the table rows

$("select[name='status-type']").change(function(){
    var val = $(this).val();  // get current value
    if( val == 'all'){
       $rows.show(); 
    }else{
       // hide all then show ones that match filter class
       $rows.hide().filter('.num-' + val).show();
    }
});

DEMO