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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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