隐藏/显示HTML网页的部分基于用户输入

我有一个网页，列出开放的工作在公司，按以下格式：隐藏/显示HTML网页的部分基于用户输入

标题：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; asdk LF焦耳;作为dfla; skdj F; alskdjf一个; SLD发; sldkfj一个; lsdkfj一个; sldfj

薪资范围：$ 75,000名 - $ 80,000

分类：软件开发，UI/UX

标题：网络安全分析

州：伊利诺伊州

说明：一，dlksfja; slfdja; sklfja; sldkfjas一个; sldkfj一个; lskdf一个; slkdfj一个; lsdkfj一个; sdfj一个; lsdkfj一个; lsdkfj一; lsdkfj; a lsdkfj 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作为; dlfkj一个; slkdfj; alsdkjf; ASLD JF; alskdjf; alsdkjf一个; sdlfjk ASD JF; asdkjlf; asdklf焦耳;作为dfla; skdj F; alskdjf一个; SLD发; sldkfj一个; lsdkfj一个; sldfj

工资范围：$ 85,000个 - $ 90,000个

分类：网络，网络

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

状态：马里兰

描述：一个; dlksfja; slfdja; sklfja; sldkfjas一个; sldkfj一个; lskdf一个; slkdfj一个; lsdkfj一个; sdfj一个; lsdkfj一个; lsdkfj一个; lsdkfj; alsdkfj一个; lskdjf; alskdjf一个; 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一个; sdlfjk ASD JF; asdkjlf; asdklf焦耳;作为dfla; skdj F; alskdjf一个; SLD发; sldkfj一个; lsdkfj一个; sldfj

薪资范围：$ 120,000 - $ 130,000

类别：软件工程，网络，BigData

等

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

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

1）从“国家”选择下拉菜单，列出每个美国各州，加一个“全部”选项。

2）从“类型”下拉列表中选择，该下拉列表列出了用于分类作业的每个类型，以及“全部”选项。

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

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

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

谢谢。

来源

2012-05-24 Ron Stanley

你能告诉我们标记？ – mattytommo

jQuery可以做这个简短的工作。你是否反对使用它？ – Matthew

我不反对jQuery - 我只是不知道它，只需要几个小时的工作即可完成，所以我正在寻找最简单的方法。 –

你所需要的JavaScript（它不可能与纯HTML）

与IDS然后使用类似

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

欢呼定义你的过滤内容的div

来源

2012-05-24 13:58:34 konqi

隐藏/显示HTML网页的部分基于用户输入

回答

相关问题