0

我正在制作一个谈论水果及其价格的网站。
我有制作下拉列表的代码，它选择一个选项，然后在单击该选项时将其缩小，然后还有另一个选项可以进一步缩小它。这就像一个魅力，但我不想要一个下拉框，我想要复选框。

这是代码：

<select id="fruit" class="friltro">
    <option value="all">All fruits</option>
    <option value="apple">apple</option>
    <option value="orange">orange</option>
    <option value="pineapple">pineapple</option>
</select>
<select id="price" class="friltro">
    <option value="all">All prices</option>
    <option value="1">$1</option>
    <option value="3">$3</option>
    <option value="4">$4</option>
</select>

我尝试更改 html 和 jquery 但是当我尝试过滤掉它时它根本不起作用

<input type="checkbox" id="price" value="all" class="filtro" >
<label for="filrtro" >all</label>
<input type="checkbox" id="price" value="apple" class="filtro" >
<label for="filrtro" >apple</label>

$('.friltro').change(function () {
    var criteria = '';
    var showAll = true;
    $('.friltro').each(function () {
        var val = $(this).children(':selected').val();
        if (val !== 'all') {
            criteria += '.' + $(this).attr('id') + '-' + val;
            showAll = false;
        }
    });
    if (showAll) {
        $('.item').show();
    } else {
        $('.item').hide();
        $(criteria).show();
    }
});​

我应该改变什么？

4

0 回答 0