jquery从下拉列表中过滤

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 事件。
• 在与当前选择值 (this.value) 的类相同的元素上调用 show()。
• hide()s 使用 :not 选择器的其他 p 标签没有该类。

Answer 2

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

jsFiddle.

如果您希望它在加载时发挥作用，请在附加事件后链接 change() 以触发它。