Question

我有这个javascript代码，它会在文本字段中输入单词时过滤内容。

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    var $products = $('#category_list li');
    $('#filter').keyup(function() {
        var re = new RegExp($(this).val(), "i"); // "i" means it's case-insensitive
        $products.show().filter(function() {
            return !re.test($(this).text());
        }).hide();
    });
});//]]>  
</script>

HTML PART：

Search: <input id="filter" />
<ul id="category_list">
    <li><a href="403.php">Sunny</a></li>
    <li><a href="404.php">night</a></li>
</ul>

但是现在我想使用SELECT列表而不是输入文本字段，我该如何更改JS代码？

<select id="filter">
    <option>Sunny</option>
    <option>night</option>
</select>

任何想法？

这是Fiddle！

Answer 1

交换密钥以进行更改 - 如下所示......

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    var $products = $('#category_list li');
    $('#filter').change(function() {
        var re = new RegExp($(this).val(), "i"); // "i" means it's case-insensitive
        $products.show().filter(function() {
            return !re.test($(this).text());
        }).hide();
    });
});//]]>  
</script>

使用选择列表使用Javascript过滤HTML内容

1 个答案: