1

Есть вот такой фильтр https://codepen.io/oleg-z-zin/pen/wvaBPLe Как сделать так что-бы при перезагрузке страницы он сразу фильтровал по * первый зал * и * 14 число * сейчас при перезагрузке он показывает сразу всё.

jQuery(document).ready(function() {

  $('#filter-criteria').add('#filter-select').add('#filter-select2').on('keyup change', function() {
    $('.item').hide();
    var txt = $('#filter-criteria').val();
    var select = $('#filter-select').val();
    var select2 = $('#filter-select2').val();

    select = select == "all" ? "item" : select;
    select2 = select2 == "all" ? "item" : select2;
    txt = txt == "" ? "item" : txt;
    $('.item').each(function() {
      var $this = $(this)
      if ($this.is('[class*=' + txt + ']') && $this.is('[class*=' + select + ']') && $this.is('[class*=' + select2 + ']')) {
        $this.show();
      }
    });
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="filter-criteria">
<select id="filter-select">
  <option value="pq">Первый зал</option>
  <option value="pw">Второй зал</option>
</select>
<select id="filter-select2">
  <option value="all">14 число</option>
  <option value="pyzt">15 число</option>
</select>
<hr>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>


<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>

<div class="pw chet item">второй зал 14 число</div>
<div class="pw chet item">второй зал 14 число</div>

<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>

2 ответа 2

1

Установите значения селектам и вызовите обработчик события после загрузки страницы.

jQuery(document).ready(function() {

  $('#filter-criteria').add('#filter-select').add('#filter-select2').on('keyup change', function() {
    $('.item').hide();
    var txt = $('#filter-criteria').val();
    var select = $('#filter-select').val();
    var select2 = $('#filter-select2').val();

    select = select == "all" ? "item" : select;
    select2 = select2 == "all" ? "item" : select2;
    txt = txt == "" ? "item" : txt;
    $('.item').each(function() {
      var $this = $(this)
      if ($this.is('[class*=' + txt + ']') && $this.is('[class*=' + select + ']') && $this.is('[class*=' + select2 + ']')) {
        $this.show();
      }
    });
  });

  $('#filter-select').val("pq");
  $('#filter-select2').val("chet").change();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="filter-criteria">
<select id="filter-select">
  <option value="pq">Первый зал</option>
  <option value="pw">Второй зал</option>
</select>
<select id="filter-select2">
  <option value="chet">14 число</option>
  <option value="pyzt">15 число</option>
</select>
<hr>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>


<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>

<div class="pw chet item">второй зал 14 число</div>
<div class="pw chet item">второй зал 14 число</div>

<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>

1
  • спасибо большое 9 фев 2020 в 13:54
0

Добавьте

else 
    {
    $this.hide();
    }

Ваш ответ

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

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