2

我有一个网页，列出了公司的空缺职位，格式如下：

标题：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

类别：软件工程、网络、大数据

等等

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

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

1) 从列出美国各州的“州”下拉菜单中选择，外加“全部”选项。

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

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

我不需要状态或类型字段中的多选功能。

任何有关如何以最简单的方式执行此操作的建议将不胜感激。该网站不涉及任何数据库 - 它只是一个静态网站，我每周更新一次此页面，因为新工作的开放和关闭。一旦我有了这个工作，简单的手动更新就完全没问题了。

谢谢你。

4

1 回答 1

3

你需要 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>

干杯

于 2012-05-24T13:58:34.877 回答