jQuery使用简单的选择框过滤列表答案

【问题标题】：jQuery filter a list using simple select boxjQuery使用简单的选择框过滤列表
【发布时间】：2012-11-09 20:13:03
【问题描述】：

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

你能帮帮我吗？提前谢谢

<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>

【问题讨论】：

标签： jquery list filter drop-down-menu

【解决方案1】：

给你，伙计 - 几乎和你上面的例子一样：

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();
        }
    });
});

【讨论】：

或用于压缩的更短版本：var $this = $(this); $this.parent().toggle($this.html() === criteria);
@YuryTarabanko 你应该回答这个问题，所以我可以删除它；）
太棒了！非常感谢 f0x 和 Yury
@user1842181 - 没问题！你会接受答案，这样就可以关闭了吗？谢谢。上面 0 旁边的绿色勾号。