Question

我想知道如何根据下拉列表创建一个过滤内容的选项。我不是在寻找插件，只要这不是困难的事情。这是从下拉列表中选择选择时我需要做的一个例子：

<select name="division-select" id="division-select">
 <option value="halter">Halter</option>
 <option value="english">English</option>
</select>

<div>
 <p class="halter">halter class 1</p>
 <p class="halter">halter class 2</p>
 <p class="english">english class 1</p>
 <p class="english">english class 2</p>
</div>

所以我想要发生的是当下拉框中有一个选择时，选中的选项会自动隐藏任何没有类没有等于选项值的类的段落。

这可能吗？

感谢您对此提供任何帮助。

罗布

Answer 1

$("#division-select").bind("change", function() {
    $("." + this.value).show();
    $("p:not(." + this.value + ")").hide();
});

以下是一个有效的例子：http://jsfiddle.net/andrewwhitaker/KcStv/

备注：

将事件处理程序绑定到select元素的change事件。

在类的元素上调用show()等于select（this.value）当前值的元素。

hide()使用:not选择器时没有该类的其他p标记。

Answer 2

$('#division-select').change(function() {
    var matches = $('div > p.' + $(this).val());
    matches.show().siblings().not(matches).hide();
});

jsFiddle

如果你希望它在加载时发挥其魔力，在附加事件后链change()触发它。

jquery过滤器从下拉列表

2 个答案: