Всем привет ! Помогите пожалуйста! Нужно сделать фильтр который использует 2 select. Вот пример
ссылка. загвоздка состоит в том , что данные нужно доставать с помощью 2-х select из бд. Я перерыл все, но ничего не нашел... но вот моя попытка справиться.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<?php
require_once 'connect.php';
require_once 'function.php';
?>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select id="flats">
<option value="all">Выберите квартиру</option>
<?php $filterflat = get_filterflat(); ?>
<?php foreach ($filterflat as $post): ?>
<option value="<?=$post["id"]?>"><?=$post["name"]?></option>
<?php endforeach; ?>
</select>
<select id="station">
<option value="all">Выберите станцию</option>
<?php $filtermetro = get_filtermetro(); ?>
<?php foreach ($filtermetro as $post): ?>
<option value="<?=$post["id"]?>"><?=$post["name"]?></option>
<?php endforeach; ?>
</select>
<?php $posts = get_posts(); ?>
<?php foreach ($posts as $post): ?>
<div id="items">
<div class="item" data-color="<?=$post["flatid"]?>" data-shape="<?=$post["metroid"]?>">
<div class="infoFlat">
<h3><?=$post["flat"]?></h3>
<h3><?=$post["metro"]?></h3>
<h3><?=$post["price"]?></h3>
<p class="b1"><?=$post["time"]?></p>
</div>
<div class="itemText">
<p><?=$post["texts"]?></p>
</div>
</div>
</div>
<?php endforeach; ?>
<script>
var flat = document.getElementById('flats');
var metro = document.getElementById('station');
var items_el = document.getElementById('items');
var filter = function() {
var items = items_el.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
if ((flat.value == 'all' || flat.value == items[i].dataset.color) &&
(metro.value == 'all' || metro.value == items[i].dataset.shape)) {
items[i].style.display = 'block';
} else {
items[i].style.display = 'none';
}
}
};
flat.addEventListener("change", filter);
metro.addEventListener("change", filter);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
function.php
require_once 'connect.php';
function get_posts() { // Как и скрипт выводит все статьи сразу
global $link;
$sql = " SELECT * FROM order_post ORDER BY rand()";
$result = mysqli_query($link, $sql);
$posts = mysqli_fetch_all($result, MYSQLI_ASSOC);
return $posts;
}
function get_filterflat() { // 1.select Выводит все option`ы a именно ('все','1-к квратира','2-к квратир','3-к квратир','Другое')
global $link;
$sql = "SELECT * FROM flats";
var_dump($sql);
$result = mysqli_query($link, $sql);
$filterflat = mysqli_fetch_all($result, MYSQLI_ASSOC);
return $filterflat;
}
function get_filtermetro() { // 2.select выврдит станции метро (бульвар Рокоссовского , Курская и т.д.)
global $link;
$sql = "SELECT * FROM station";
$result = mysqli_query($link, $sql);
$filtermetro = mysqli_fetch_all($result, MYSQLI_ASSOC);
return $filtermetro;
}
function get_allFilters() { // Фильтрация статей по select`ам
global $link;
$sql = " SELECT * FROM order_post WHERE metroid = '".$_POST['station']."' AND flatid = '".$_POST['flats']."' ";
// var_dump($sql);
$result = mysqli_query($link, $sql);
$allfilters = mysqli_fetch_all($result, MYSQLI_ASSOC);
return $allfilters;
}
Простой
Средний