Сделать фильтрацию при выборе нужных option и после этого нужно нажать на кнопку, чтобы прошла фильтрация?

Question

Работаю с фильтрацией от isotope вот его код: https://codepen.io/desandro/pen/nFrte . Но сейчас фильтрация происходит сразу после нажатия на кнопку.

Мне нужно, чтобы пользователь мог выбрать все необходимые настройки(option) в select и после нажатия на кнопку "Подобрать", показались нужные карточки, подобранные фильтром. Есть такой код моих настроек(приведён ниже). Как подстроить скрипт isotope, чтобы нужно было нажимать не на кнопки (в самом верху приведён код фильтрации isotope), а выбирать нужные option и после только нажатия на "Подобрать" будет подбирать нужные карточки

Если вы знаете другой удобный плагин под нужные мне настройки(выбор option и нажатие на кнопку), то можете посоветовать его) Заранее спасибо большое за помощь! :)

/*simple filter*/
.simple-filter {
    display: flex;
    padding: 18px 0;
    align-items: center;
}
.simple-filter_item {
    display: flex;
    flex-direction: column;
    min-width: 33%;
    width: 100%;
    padding: 8px 15px;
}
.simple-filter_item p {
    font-family: "SF-Pro-Text-Regular";
    font-weight: 500;
    font-size: 12px;
    color: #71748C;
}
.simple-btn {
    margin: 0 16px;
}
.simple-btn button {
    font-size: 15px;
  font-family: "SF-UI-Text", sans-serif;
  width: 110px;
  height: 40px;
  color: #fff;
  background: #43AD00;
  border-radius: 2px;
  border: none;
}
.simple-more-filter {
    display: flex;
    min-width: 200px !important;
    align-items: center;
    cursor: pointer;
}
.simple-more-filter span {
    color: #43AD00;
    padding-left: 4px;
}
/*advanced filter*/
.advanced-filter {
    display: flex;
    padding: 18px 0;
    flex-wrap: wrap;
}
.advanced-filter_item {
    width: auto;
    min-width: 320px;
    flex-grow: 1;
}
.advanced-filter input {
    height: 35px;
}
.advanced-filter_item:last-child {
    min-width: 400px;
}
/*other settings of filter*/
.filter-button {
    margin-top: 8px;
    margin-left: auto;
    display: flex;
    align-items: center;
}

<div class="advanced-filter filter-disactive">
  <div class="advanced-filter_item simple-filter_item">
    <p>Уровень подготовки</p>
    <select>
      <option value="bacalavr">Бакалавриат</option>
      <option value="mag">Магистратура</option>
    </select>
  </div>
  <div class="advanced-filter_item simple-filter_item">
    <p>Направление образования</p>
    <select>
      <option value="baclavr">Бакалавриат</option>
      <option value="mag">Магистратура</option>
      <option value="spec">Специалитет</option>
    </select>
  </div>
  <div class="advanced-filter_item simple-filter_item">
    <p>Программа</p>
    <select>
      <option value="baclavr">Любая</option>
      <option value="baclavr">Финансы и кредит</option>
      <option value="mag">Магистратура</option>
      <option value="spec">Специалитет</option>
    </select>
  </div>
  <div class="advanced-filter_item simple-filter_item">
    <p>Университет</p>
    <select>
      <option value="baclavr">Любой</option>
      <option value="mag">Особенный</option>
      <option value="spec">Виртуальный</option>
    </select>
  </div>
  <div class="advanced-filter_item simple-filter_item">
    <p>Язык обучения</p>
    <select>
      <option value="baclavr">Любой</option>
      <option value="baclavr">Французский</option>
      <option value="mag">Английский</option>
      <option value="spec">Русский</option>
    </select>
  </div>
  <div class="advanced-filter_item simple-filter_item">
    <p>Код программы</p>
    <input type="text" placeholder="15.04.32">
  </div>
  <div class="filter-button">
    <div class="simple-btn">
      <button type="post">Подобрать</button>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Сделать фильтрацию при выборе нужных option и после этого нужно нажать на кнопку, чтобы прошла фильтрация?

Ответы (0 шт):