Как фильтровать товары по нескольким полям?

@dailydose · Регистрация: 21.07.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте, подскажите как можно сделать так, чтобы фильтр был не взаимоисключающим?
Т.е. чтобы можно было комбинировать, например отфильтровать список товаров одновременно и по производителю и по цвету.

Сейсас допустим нажимаю Фильтр по сплавам: red
- выводятся 4 товара (RU#1, EN#6, UA#A, EN#C)
Затем хочу эти же товары отфильтровать еще и по производителю: EN
- должны вывестить 2 товара (EN#6, EN#C)

Каким образом этого можно добиться?

Вывожу товары так:

PHP

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="sklad_filter by_alloy">Фильтр по сплавам:<span class="sklad_alloys_list"></span></div>
<div class="sklad_filter by_manufacturer">Фильтр по производителю:<span class="sklad_manufacturers_list"></span></div>
<?
$arItems = array(
    array("NAME"=>"tovar #1", "COUNT"=>"12", "MANUFACTURER"=>"RU", "COLOR"=>"red",    "PRICE"=>"1290512"),
    array("NAME"=>"tovar #2", "COUNT"=>"15", "MANUFACTURER"=>"EN", "COLOR"=>"green",  "PRICE"=>"1354123"),
    array("NAME"=>"tovar #3", "COUNT"=>"74", "MANUFACTURER"=>"DE", "COLOR"=>"blue",   "PRICE"=>"1453214"),
    array("NAME"=>"tovar #4", "COUNT"=>"7",  "MANUFACTURER"=>"RU", "COLOR"=>"cyan",   "PRICE"=>"2395025"),
    array("NAME"=>"tovar #5", "COUNT"=>"81", "MANUFACTURER"=>"RU", "COLOR"=>"orange", "PRICE"=>"1535254"),
    array("NAME"=>"tovar #6", "COUNT"=>"12", "MANUFACTURER"=>"EN", "COLOR"=>"red",    "PRICE"=>"4636346"),
    array("NAME"=>"tovar #7", "COUNT"=>"0",  "MANUFACTURER"=>"DE", "COLOR"=>"black",  "PRICE"=>"6769705"),
    array("NAME"=>"tovar #8", "COUNT"=>"10", "MANUFACTURER"=>"UA", "COLOR"=>"green",  "PRICE"=>"3463413"),
    array("NAME"=>"tovar #9", "COUNT"=>"15", "MANUFACTURER"=>"UA", "COLOR"=>"black",  "PRICE"=>"4757567"),
    array("NAME"=>"tovar #A", "COUNT"=>"28", "MANUFACTURER"=>"UA", "COLOR"=>"red",    "PRICE"=>"2345235"),
    array("NAME"=>"tovar #B", "COUNT"=>"76", "MANUFACTURER"=>"RU", "COLOR"=>"green",  "PRICE"=>"3413412"),
    array("NAME"=>"tovar #C", "COUNT"=>"94", "MANUFACTURER"=>"EN", "COLOR"=>"red",    "PRICE"=>"7456735"),
);
?>
<table border="1" id="items">
<thead>
    <tr>
        <th>Товар</th>
        <th>Наличие, кг</th>
        <th>Производитель</th>
        <th>Цвет</th>
        <th>Цена, руб/кг</th>
    </tr>
</thead>
<tbody>
<?foreach($arItems as $arItem):?>
    <tr class="sklad_alloy" data-color="<?=$arItem["COLOR"]?>" data-manufacturer="<?=$arItem["MANUFACTURER"]?>">
        <th><?=$arItem["NAME"]?></th>
        <th><?=$arItem["COUNT"]?></th>
        <th><?=$arItem["MANUFACTURER"]?></th>
        <th><?=$arItem["COLOR"]?></th>
        <th><?=$arItem["PRICE"]?></th>
    </tr>
<?endforeach?>
</tbody>
</table>

Добавляю фильтр так:

javascript

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
BX.ready( function()
{
    var table = BX("items");
    
    // add alloys to filter
    let alloys = [];
    let tr = table.getElementsByClassName("sklad_alloy");
    for(let i =0; i < tr.length; ++i)
    {
        let alloy = tr[i].getAttribute("data-color");
        if (alloy && alloys.indexOf(alloy) === -1)
            alloys.push(alloy);
    }
    let sklad_alloys_list = document.getElementsByClassName("sklad_alloys_list")[0];
    
    for(let i = 0; i < alloys.length; ++i)
    {
        sklad_alloys_list.innerHTML += ' <a href="javascript:void(0)" class="sklad_link_filter">' + alloys[i] + '</a>';
    }
    
    // add manufacturers to filter
    let manufacturers = [];
    for(let i =0; i < tr.length; ++i)
    {
        let manufacturer = tr[i].getAttribute("data-manufacturer");
        if (manufacturer && manufacturers.indexOf(manufacturer) == -1)
            manufacturers.push(manufacturer);
    }
    let sklad_manufacturers_list = document.getElementsByClassName("sklad_manufacturers_list")[0];
    
    for(let i = 0; i < manufacturers.length; ++i)
    {
        sklad_manufacturers_list.innerHTML += ' <a href="javascript:void(0)" class="sklad_link_filter">' + manufacturers[i] + '</a>';
    }
    
    // handle click on a.sklad_link_filter
    BX.bind(BX(document.getElementsByClassName("sklad_filter")[0]), 'click', function(e)
    {
        console.log(e.target);
        if (!e || !e.target || !e.target.parentNode) return;
        if (e.target.parentNode.className.indexOf("sklad_alloys_list") != -1)
        {
            for(let i =0; i < tr.length; ++i)
            {
                let alloy = tr[i].getAttribute("data-color");
                if (alloy == e.target.innerText)
                    tr[i].style.display = "table-row";
                else
                    tr[i].style.display = "none";
            }
        }
    });
    BX.bind(BX(document.getElementsByClassName("sklad_filter")[1]), 'click', function(e)
    {
        console.log(e.target);
        if (!e || !e.target || !e.target.parentNode) return;
        if (e.target.parentNode.className.indexOf("sklad_manufacturers_list") != -1)
        {
            for(let i =0; i < tr.length; ++i)
            {
                let manufacturer = tr[i].getAttribute("data-manufacturer");
                if (manufacturer == e.target.innerText)
                    tr[i].style.display = "table-row";
                else
                    tr[i].style.display = "none";
            }
        }
    });
    
    // remove empty filters
    if (!sklad_manufacturers_list.innerHTML)
        document.getElementsByClassName("by_manufacturer")[0].style.display = "none";
    if (!sklad_alloys_list.innerHTML)
        document.getElementsByClassName("by_alloy")[0].style.display = "none";
    
    if (!sklad_manufacturers_list.innerHTML && !sklad_alloys_list.innerHTML)
        document.getElementsByClassName("remove_filter")[0].style.display = "none";
});
 
function removeFilter()
{
    var node = document.getElementsByClassName("sklad_table")[0];
    let tr = node.getElementsByClassName("sklad_alloy");
    for(let i =0; i < tr.length; ++i)
    {
        tr[i].style.display = "table-row";
    }
}

@dailydose · 29.05.2017, 16:59 **[ТС]**

PHP
1
IncludeComponent ( "bitrix:catalog.filter")

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом