jQuery使用简单的选择框过滤列表 [英] jQuery filter a list using simple select box

问题描述

我想使用jquery或javascript过滤这个简单的LIST。
我发现唯一的例子是这样的多个选择框： http://jsfiddle.net/EfEYQ/

I would like to filter this simple LIST with jquery or javascript. The only exemple i found is with multiple selectedbox like this one: http://jsfiddle.net/EfEYQ/

你能帮我吗？
提前提前

Can you please help me? Thx in advance

<select id="filtercountry">
                    <option value='ALL' selected="selected">Select by Country</option>
                    <option value="1">Australia</option>
                    <option value="2">Austria</option>
                    <option value="3">Brazil</option>
                    <option value="4">Canada</option>
</select>


<ul class="submenu">
    <li class="submenucategory">KIDS</li>
    <li id="Cell1" class="lilist">AAAAAA <span class="country">1</span></li>
    <li id="Cell2" class="lilist">BBBBBB <span class="country">2</span></li>
    <li id="Cell3" class="lilist">CCCCCC <span class="country">2</span></li>
    <li id="Cell4" class="lilist">DDDDDD <span class="country">1</span></li>
    <li id="Cell5" class="lilist">EEEEEE <span class="country">3</span></li>
    <li id="Cell6" class="lilist">FFFFFF <span class="country">4</span></li>
</ul>

推荐答案

这里你去，伙伴 - 和你上面的例子是一样的：

Here you go, mate - pretty much the same as your example above:

DEMO

$('#filtercountry').change(function(){
    var criteria = $(this).val();
    if(criteria == 'ALL'){
        $('.lilist').show();
        return;
    }
    $('.country').each(function(i,option){
        if($(this).html() == criteria){
            $(this).parent().show();
        }else {
            $(this).parent().hide();
        }
    });
});​​​​​​​​​​​​​​

这篇关于jQuery使用简单的选择框过滤列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！