@TuMko

Как отфильтровать зависимые списки?

Есть два списка. При клике по каждому li из списке передается значение в соответствующий input. Списки представляют собой что-то вроде range. Первый список является минимальным значением, второй - максимальным. Поэтому после клика на li в 1м списке, значение сравнивается со значением из второго списка, и если оно больше, то все значения из второго списка, которые меньше, необходимо скрыть.
<label>От</label>
<input type="text" id="val-year1" value="2017">
<ul class="years" id="sel1">
  <li class="years-item min-year" data-year="2016">2016</li>
  <li class="years-item min-year active" data-year="2017">2017</li>
  <li class="years-item min-year" data-year="2018">2018</li>
  <li class="years-item min-year" data-year="2019">2019</li>
  <li class="years-item min-year" data-year="2020">2020</li>
</ul>

<label>До</label>
<input type="number" id="val-year2" value="2019">
<ul class="years" id="sel2">
  <li class="years-item max-year" data-year="2016">2016</li>
  <li class="years-item max-year" data-year="2017">2017</li>
  <li class="years-item max-year" data-year="2018">2018</li>
  <li class="years-item max-year active" data-year="2019">2019</li>
  <li class="years-item max-year" data-year="2020">2020</li>
</ul>


Реализация JS:
let minYear;
let maxYear;
  $('.min-year').click(function() {
    $('.min-year').removeClass('active');
    $(this).addClass('active');
    minYear = $(this).data('year');
    $('#val-year1').val(minYear);
  });

  $('.max-year').click(function() {
    $('.max-year').removeClass('active');
    $(this).addClass('active');
    maxYear = $(this).data('year');
    $('#val-year2').val(maxYear);
  });

  $('#val-year1').change(function() {
    const min = +$(this).val();

    $('#val-year2')
      .val((i, v) => Math.max(v, min))
      .next()
      .children()
      .show()
      .filter((i, n) => +n.dataset.year < min)
      .hide();
  }).change();


При клике по элементам списка значения не сразу меняются, а только после того, как в input внести изменения с клавиатуры, к примеру поставить пробел (если input type=text). Похоже, что input как-то не сразу отслеживает изменения .change().
Так же подскажите как сделать, чтобы при фильтрации во втором списке, если в списке больше нет активных, добавлялся класс aсtive первому по списку li?

https://codepen.io/TuMko/pen/PoGZWdX
  • Вопрос задан
  • 45 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
25 янв. 2021, в 09:18
500 руб./за проект
25 янв. 2021, в 09:14
5000 руб./за проект
25 янв. 2021, в 08:35
1000 руб./в час