У меня есть код, который фильтрует блоки по выбранному цвету:
var filter_button_el = document.getElementById('filter');
var items_el = document.getElementById('items');
filter_button_el.onclick = function() {
console.log(this.value);
var items = items_el.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
if (items[i].classList.contains(this.value)) {
items[i].style.display = 'block';
} else {
items[i].style.display = 'none';
}
}
}
var filter_select_el = document.getElementById('filter1');
var items_el = document.getElementById('items');
filter_select_el.onclick = function() {
console.log(this.value);
var items = items_el.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
if (items[i].classList.contains(this.value)) {
items[i].style.display = 'block';
} else {
items[i].style.display = 'none';
}
}
}
#items {
margin-top: 100px;
}
.item {
float: left;
width: 50px;
height: 50px;
margin: 1px;
}
.red {
background: #cf2624;
}
.blue {
background: #2478cf;
}
.green {
background: #24cf7c;
}
.orange {
background: #cf7c24;
}
.yellow {
background: #f1e81f;
}
<select id="filter1">
<option value="">Сбросить</option>
<option value="item">все</option>
<option value="red">красный</option>
<option value="blue">синий</option>
<option value="green">зелёный</option>
<option value="orange">оранжевый</option>
<option value="yellow">жёлтый</option>
</select>
<button id="filter" value="red">Красный</button>
<div id="items">
<div class="item red">1</div>
<div class="item blue">2</div>
<div class="item red">3</div>
<div class="item green">4</div>
<div class="item red">5</div>
<div class="item orange">6</div>
<div class="item green">7</div>
<div class="item yellow">8</div>
<div class="item green">9</div>
<div class="item orange">10</div>
<div class="item yellow">11</div>
<div class="item blue">12</div>
<div class="item green">13</div>
<div class="item orange">14</div>
<div class="item blue">15</div>
<div class="item orange">16</div>
<div class="item red">17</div>
<div class="item yellow">18</div>
</div>
По отдельности всё работает (список фильтрует, кнопка то же).
Не понимаю как сделать фильтр вроде чекбоксов. То есть, при выборе в списке "Синий" - остаются все синие блоки, при нажатии на кнопку "Красный" - добавляются красные блоки. Нужно, что бы принцип работы был следующий: список воспринимался - чекбоксом, а кнопки - "радио".