javascript - 使用下拉列表 jquery 插件过滤页面上的 div

标签 javascript jquery html css filtering

<分区>


我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。

关闭 7 年前

我有一个页面有很多类似的 <div>它上面的元素,我需要允许用户通过从下拉列表中选择值来过滤它。 有没有简单的 jquery 插件可以做到这一点?我找到了 http://luis-almeida.github.io/filtrify/但它太复杂了,我只需要一个简单的下拉过滤。

最佳答案

取决于您的过滤逻辑,但像这样?

<select id="sel">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>

<div class="filt one">one</div>
<div class="filt one">one</div>
<div class="filt one">one</div>
<div class="filt one">one</div>
<div class="filt one">one</div>
<div class="filt one">one</div>
<div class="filt two">two</div>
<div class="filt two">two</div>
<div class="filt two">two</div>
<div class="filt two">two</div>
<div class="filt three">three</div>

<script> 
$("#sel").on("change", function(){
$(".filt").show();
$("."+$(this).val()).hide();
});
</script>

关于javascript - 使用下拉列表 jquery 插件过滤页面上的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34313587/

上一篇:html - 页面标题向右延伸到浏览器边缘,但主体有间隙,导致外观不一致

下一篇:javascript - 无法使用 onclick 功能在 div 中打开超链接

相关文章:

javascript - 使用 Webpack 和 Electron 使用绝对路径导入

jQuery 多个选择器顺序为 "this"

javascript - 将参数传递给事件处理函数的最佳实践

javascript - 创建一个控件以在不使用第三方库的情况下接受脚本(javascript)

javascript - 如何在 WHMCS php 中处理文件上传

javascript - 如何修复错误 "Selection.addRange()"?

javascript - MVC3 中使用 ajax 进行 Webgrid 刷新

javascript - 当他到达页面末尾时重置 JavaScript 上的移动按钮

javascript - 使用 jQuery 从一个值获取两个值

html - 如何在选择框中为不同的选项显示不同的颜色