Question

我有一个网页，列出公司的开放职位，格式如下：

标题：JavaScript开发人员

州：马里兰州

描述：a; dlksfja; slfdja; sklfja; sldkfjas a; sldkfj a; lskdf a; slkdfj a; lsdkfj a; sdfj a; lsdkfj a; lsdkfj a; lsdkfj; alsdkfj a; lskdjf; alskdjf a; lsdkfj a; lsdkfj a; lsdkfj a; lsdkfj a; slkdfj a; lskdfj a; lsdkfj a; lsdkjf; alskdjf; alskdjf; alsdkjf; alsdkfj a; lskdjf a; lskdj f; alsdkfj a; lsdkfj as; dlfkj a; slkdfj; alsdkjf; asld jf ; alskdjf; alsdkjf a; sdlfjk asd jf; asdkjlf; asdklf j; as dfla; skdj f; alskdjf a; sld fa; sldkfj a; lsdkfj a; sldfj

薪资范围：75,000美元 - 80,000美元

分类：软件开发，UI / UX

标题：网络安全分析师

州：伊利诺伊州

描述：a; dlksfja; slfdja; sklfja; sldkfjas a; sldkfj a; lskdf a; slkdfj a; lsdkfj a; sdfj a; lsdkfj a; lsdkfj a; lsdkfj; alsdkfj a; lskdjf; alskdjf a; lsdkfj a; lsdkfj a; lsdkfj a; lsdkfj a; slkdfj a; lskdfj a; lsdkfj a; lsdkjf; alskdjf; alskdjf; alsdkjf; alsdkfj a; lskdjf a; lskdj f; alsdkfj a; lsdkfj as; dlfkj a; slkdfj; alsdkjf; asld jf ; alskdjf; alsdkjf a; sdlfjk asd jf; asdkjlf; asdklf j; as dfla; skdj f; alskdjf a; sld fa; sldkfj a; lsdkfj a; sldfj

薪资范围：$ 85,000 - $ 90,000

分类：网络，网络

标题：网络软件工程师 - Hadoop

州：马里兰州

描述：a; dlksfja; slfdja; sklfja; sldkfjas a; sldkfj a; lskdf a; slkdfj a; lsdkfj a; sdfj a; lsdkfj a; lsdkfj a; lsdkfj; alsdkfj a; lskdjf; alskdjf a; lsdkfj a; lsdkfj a; lsdkfj a; lsdkfj a; slkdfj a; lskdfj a; lsdkfj a; lsdkjf; alskdjf; alskdjf; alsdkjf; alsdkfj a; lskdjf a; lskdj f; alsdkfj a; lsdkfj as; dlfkj a; slkdfj; alsdkjf; asld jf ; alskdjf; alsdkjf a; sdlfjk asd jf; asdkjlf; asdklf j; as dfla; skdj f; alskdjf a; sld fa; sldkfj a; lsdkfj a; sldfj

薪资范围：120,000美元 - 130,000美元

分类：软件工程，Cyber，BigData

等

当我只列出一些工作时，上面的风格很好。现在我有近100个，我需要给用户一个过滤他们看到的工作的方法。我想按“状态”和各种“类型”进行过滤。请参阅上面的一些示例，并注意每个作业只能有一个状态，但它可能有一个或多个类型。

我想在页面顶部添加一个简单的过滤部分，用户可以在其中执行以下操作：

1）从列出每个美国州的“州”下拉列表中选择，再加上“全部”选项。

2）从“类型”下拉列表中选择，列出我们用于对作业进行分类的每种类型，以及“全部”选项。

3）点击“过滤器”按钮，使匹配的作业可见，并隐藏不匹配的作业。

我不需要State或Type字段中的多选功能。

任何有关如何以最简单的方式执行此操作的建议都将受到高度赞赏。网站中没有涉及任何数据库 - 它只是一个静态网站，随着新工作的开启和关闭，我每周更新一次此页面。一旦我开始工作，简单的手动更新就完全没了。

谢谢。

Answer 1

你需要JavaScript（纯HTML不可能）

使用ID定义div中的可过滤内容，然后使用类似

的内容

   <script type="text/javascript">
   var sel = document.getElementById('yourDropDown');
   sel.onchange = function() {
      var show = document.getElementById('yourDivId');
      show.style.display='none';
   }
   </script>

欢呼声

根据用户输入隐藏/显示HTML页面的部分内容

1 个答案: