1

Как реализовать фильтр, который будет показывать только те блоки, в которых есть соответствующая информация, а все другие скрывать?

Есть таблицы "Районы", "Улицы", ну и самая главная таблица "Отели". В таблице "Отели" есть столбцы "Район", "Улица". В них записываю наименование района или улицы отеля, а не передаю id из таблиц.

Например, есть район "Васильевский"(сделано в виде чекбокса), и когда мы нажмем на этот чекбокс, то покажется блок с информацией, у которого в БД значение района "Васильевский", а другие - скроются. Хочу заметить, что в фильтре можно выбирать много значений: Например, район "Васильевский", можно выбрать улицу "Попкова", "Пупкина" и выведутся отели в этом районе.

В общем, мульти-чекбоксы. Может есть какой-то другой вариант? Прошу помочь.

Вот код:

<form action="index.php" method="post">
    <div id="filter_c">
        <div class="rajon">
          <span>Rajon</span>
              <div class="filter_l"> 
                <?php foreach ($rajon as $id => $rajon): ?>
                    <div class="kbox">
                    <input type="checkbox" id="rajon_<?=$id;?>" value="<?=$id;?>" name="rajon[]" />
                      <label for="rajon_<?=$id;?>">
                        <span class="filter_name"><?=$rajon['rajon'];?></span>
                      </label>
                    </div>
                <?php endforeach; ?>
              </div>
        </div>
        <div class="street">
          <span>Street</span>
              <div class="filter_l"> 
                <?php foreach ($street as $id => $street): ?>
                    <div class="kbox">
                    <input type="checkbox" id="street_<?=$id;?>" value="<?=$id;?>" name="street[]" />
                      <label for="street_<?=$id;?>">
                        <span class="filter_name"><?=$street['street'];?></span>
                      </label>
                    </div>

                <?php endforeach; ?>
              </div>            
        </div>             
    </div>
</form> 

Вот блок с информацией, который выводится:

<div class="desc">
  <h2><?=$hotel['name']?></h2>
   <p>Region: <?=$hotel['region']?></p>
   <p>Street: <span><?=$hotel['street']?></span></p>
</div>
1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 5 ноя 2015 в 7:20

1 ответ 1

1

Достаточно посмотреть примеры уже готового фильтра на других сайтах. Существует фильтр как с перезагрузкой страницы, так и без нее.

Логика работы:

  • исходя из выбранных чекбоксов генерируем запрос rajony={1,2,3}&streets={12,15}
    (HTML Multi checkbox set)
  • отправляем запрос
  • получаем ответ на запрос
  • обновляем отображаемые данные исходя из полученных данных

Обновление

http://codepen.io/nfxpnk/pen/meKzgY

var checkboxState = '';
$(document).ready(function() {
  $('input').change(function() {
    checkboxState = '';
    $('input').each(function() {
      if (this.checked) {
        checkboxState += $(this).val() + ' ';
      }
    });

    // отправка запроса и вывод результата
    $('#content').html(checkboxState);

  });
});
.filter {
  float: left;
  width: 200px;
  border: 1px solid red;
}
.content {
  float: left;
  border: 1px solid green;
  width: 600px;
}
<div class="filter">
  <form action="index.php" method="post">
    <div id="filter_c">
      <div class="rajon">
        <span>Rajon</span>
        <div class="filter_l">
          <div class="kbox">
            <input type="checkbox" id="rajon_1" value="r1" name="rajon[]" />
            <label for="rajon_1">
              <span class="filter_name">Тестовый район 1</span>
            </label>
          </div>
          <div class="kbox">
            <input type="checkbox" id="rajon_2" value="r2" name="rajon[]" />
            <label for="rajon_2">
              <span class="filter_name">Тестовый район 2</span>
            </label>
          </div>

        </div>
      </div>
      <div class="street">
        <span>Street</span>
        <div class="filter_l">

          <div class="kbox">
            <input type="checkbox" id="street_1" value="u1" name="street[]" />
            <label for="street_1">
              <span class="filter_name">Тестовая улица 1</span>
            </label>
          </div>
          <div class="kbox">
            <input type="checkbox" id="street_2" value="u2" name="street[]" />
            <label for="street_2">
              <span class="filter_name">Тестовая улица 2</span>
            </label>
          </div>


        </div>
      </div>
    </div>
  </form>
</div>
<div class="content" id="content"></div>

1
  • мне как раз без перезагрузки и надо. Как видите, у меня для каждого checkbox свое имя т.к. разные фильтры. Честно говоря не знаю как делать
    – Fok
    31 окт 2015 в 19:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.