Macan
Новичок
Приветствую всех, подскажите как реализовать множественный фильтр. Имеется база данных, из которой выводятся выбранный пользователем с помощью выпадающего списка и чек-боксов , товар на страницу в блоке carts.
----index.php----
----main.php----
----common.js----
----index.php----
PHP:
<?php
include 'main.php';
$shiny = $result;
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<base href="/">
<title></title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Template Basic Images Start -->
<meta property="og:image" content="path/to/image.jpg">
<link rel="icon" href="img/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon-180x180.png">
<!-- Template Basic Images End -->
<!-- Custom Browsers Color Start -->
<meta name="theme-color" content="#322E44">
<!-- Custom Browsers Color End -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<form class="form">
<?php
$result = mysqli_query($conn, 'SELECT DISTINCT brend FROM shiny ORDER BY brend');
?>
<select id="brend">
<option disabled selected>Все</option>
<?php
while( ($brend = mysqli_fetch_assoc($result)) ) {
echo '<option value="'. $brend['brend'] .'">' . $brend['brend'] . '</option>';
}
?>
</select>
<?php
$result = mysqli_query($conn, 'SELECT DISTINCT width FROM shiny ORDER BY width');
?>
<select id="width">
<option disabled selected>Все</option>
<?php
while( ($width = mysqli_fetch_assoc($result)) ) {
echo '<option value="' . $width['width'] . '">' . $width['width'] . '</option>';
}
?>
</select>
<?php
$result = mysqli_query($conn, 'SELECT DISTINCT height FROM shiny ORDER BY height');
?>
<select id="height">
<option disabled selected>Все</option>
<?php
while( ($height = mysqli_fetch_assoc($result)) ) {
echo '<option value="' . $height['height'] . '">' . $height['height'] . '</option>';
}
?>
</select>
<?php
$result = mysqli_query($conn, 'SELECT DISTINCT diametr FROM shiny ORDER BY diametr');
?>
<select id="diametr">
<option disabled selected>Все</option>
<?php
while( ($diametr = mysqli_fetch_assoc($result)) ) {
echo '<option value="' . $diametr['diametr'] . '">' . $diametr['diametr'] . '</option>';
}
?>
</select>
<div class="leto">
<input class="check-box" type="checkbox" id="leto" />
<label class="check" for="leto">Летняя</label>
</div>
<div class="zima">
<input class="check-box" type="checkbox" id="zima" />
<label class="check" for="zima">Зимняя</label>
</div>
<div class="ship">
<input class="check-box" type="checkbox" id="ship" />
<label class="check" for="ship">Шипованная</label>
</div>
<div class="neship">
<input class="check-box" type="checkbox" id="neship" />
<label class="check" for="neship">Нешипованная</label>
</div>
<button type="reset" class="button-right">Сбросить</button>
</form>
<button class="button-left">Выбрать</button>
<div class="carts" id="carts">
<!-- <?php foreach ($shiny as $item) : ?>
<div class="cart">
<img src="<?=$item['image'];?>">
<p class="brend"><b><?=$item['brend'];?></b></p>
<p class="name"><b><?=$item['name'];?></b></p>
<p class="width"><b>Ширина: <?=$item['width'];?></span></b></p>
<p class="height"><b>Высота: <?=$item['height'];?></span></b></p>
<p class="diametr"><b>Диаметр: <?=$item['diametr'];?></span></b></p>
<p class="season"><b>Сезон: <?=$item['season'];?></span></b></p>
<p class="weight"><b>Вес: <?=$item['weight'];?> кг.</span></b></p>
</div>
<?php endforeach; ?> -->
</div>
<?php
mysqli_close($conn);
?>
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
</body>
</html>
PHP:
$conn = mysqli_connect('localhost', '*****', '******', '******');
if($conn == false ) {
echo 'Не удалось соединиться!';
echo mysqli_connect_error();
exit();
}
$result = mysqli_query($conn, 'SELECT * FROM shiny');
for($i = 0;$i < mysqli_num_rows($result); $i++) {
$shiny[] = mysqli_fetch_array($result);
}
return $shiny;
JavaScript:
$(document).ready(function() {
function filterItems() {
var filter = $('.form'),
items = $('.cart');
items.hide();