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

Answer 2

$("select[name='status-type']")之类的CSS选择器可以替换为document.querySelector("select[name='status-type']")。然后.val()可以写成.value in vanilla。

有多种方法可以显示和隐藏元素，最简单的方法是myElement.hidden = false或myElement.hidden = true。您还可以使用myElement.classList.add('myclass')添加一个类（类似于jQuery＆＃39; s myElement.addClass()）并使用classList.remove()将其删除。

您可以在Mozilla Developer Network上了解有关vanilla DOM操作的更多信息。

选择“选项”以触发表格外观

2 个答案: