Question

我正在网站上工作，并负责创建一个下拉菜单，根据类别（列为类）过滤表行的网页。我按照指南使用JQuery工作，因为我的HTML和JQuery知识非常初学者。

这是我的JQuery函数示例，我想弄清楚的是如何使for循环将1000多条重复行的函数更改为一个易于编辑的小页面内容。

function filterContent() {
    var user = document.getElementById("myDropdown").value;

     if(user=="All") {
        jQuery(".Cat1,.Cat2,.Cat3,.")
            .css("display","block");
    } else if (user=="Cat1") {
            jQuery(".Cat2")
                        .css("display","none");
            jQuery(".Cat3")
                        .css("display","none");
                         jQuery(".Cat1")
                        .css("display","block");
else if (user=="Cat2") {
            jQuery(".Cat2")
                        .css("display","none");
            jQuery(".Cat3")
                        .css("display","none");
                         jQuery(".Cat2")
                        .css("display","block");
else if (user=="Cat3") {
            jQuery(".Cat1")
                        .css("display","none");
            jQuery(".Cat3")
                        .css("display","none");
                         jQuery(".Cat3")
                        .css("display","block");
}

}

我的HTML代码如下所示：

<select id="myDropdown" onchange="filterContent();">
<option value="All">All Research Areas</option>
<option value="Cat1">Attribute 1</option>
<option value="Cat2">Attribute 2</option>
<option value="Cat3">Attribute 3</option>
</select>
<table>
<tr class"Cat1 Cat 2">This row has feature Cat 1 and 2</tr>
<tr class"Cat1 Cat 3">This row has feature Cat 1 and 3</tr>
<tr class"Cat2">This row has feature Cat2</tr>
<tr class"Cat1">This row has feature Only Cat1</tr>
</table>
</html>

DropDown菜单过滤大类别

0 个答案: