Как определить selected option?

Question

[TuMko]

Есть два select с годами, которые зависят друг от друга и представляют собой что-то вроде range. Значения в 1м являются минимальными (т.е. "от"), значения во 2м - максимальными (т.е. "до").

<div>от</div>
<select id="sel1" name="select" size="4" >
  <option value="2017" data-year="2017">2017</option>
  <option value="2018" data-year="2018" selected="selected">2018</option>
  <option value="2019" data-year="2019">2019</option>
  <option value="2020" data-year="2020">2020</option>
</select>
<div id="val"></div>
<div>до</div>
<select id="sel2" name="select" size="4" >
  <option></option>
  <option value="2017" data-year="2017">2017</option>
  <option value="2018" data-year="2018">2018</option>
  <option value="2019" data-year="2019" selected="selected">2019</option>
  <option value="2020" data-year="2020">2020</option>
</select>
<div id="val2"></div>

Задумка такая: при выборе значения(option) в первом select во втором select автоматически скрываются option, которые меньше. И при обратном выборе в меньшую сторону option снова появляются. В принципе это удалось реализовать, НО не удалось сделать чтобы при скрытии option во втором select выбирался первый доступный, если скрыт был выбранный(selected) option. Т.е. получается такой случай, когда определенные значения скрываются, но остаются selected и необходимо вручную во втором select снова выбирать option.

Пожалуйста, помогите с решением моего вопроса.

Мой код Jquery:

$( "#sel1" )
    .change(yearChange)
    .change();

  $( "#sel2" )
    .change(yearChange)
    .change();

  function yearChange () {
    var val1 = '';
    var str = "";
    var str2 = "";
    $( "#sel1 > option:selected" ).each(function() {
      str += $( this ).val();
      //перебор option sel2
      $('#sel2 option').each(function(){
        val1 = $(this).val();
        if (val1 < str) {
          //скрыть элементы sel2, которые меньше выбранного option sel1 = str, снять selected
          $(this).attr("hidden", "hidden");
          $(this).removeAttr("selected");
          
          // и проверить есть ли в sel2 selected
         
         // если нет, то назначить selected первый показанный

        } else {
          //иначе показать option
          $(this).removeAttr("hidden")
        }
      });

    });

    $( "#sel2 > option:selected" ).each(function() {
      str2 += $(this).val() + "";
    });

    $( "#val" ).text( str );
    $( "#val2" ).text( str2 );

  }

Answer 1

[0xD34F]

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

  $('#sel2')
    .val((i, v) => Math.max(v, min))
    .children()
    .show()
    .filter((i, n) => +n.value < min)
    .hide();
}).change();

или

const select1 = document.querySelector('#sel1');
const select2 = document.querySelector('#sel2');

select1.addEventListener('change', e => {
  const min = +e.target.value;
  select2.value = Math.max(select2.value, min);
  for (const n of select2.children) {
    n.hidden = +n.value < min;
  }
});

select1.dispatchEvent(new Event('change'));

Comments

[TuMko]

Спасибо большое!

[TuMko]

Здравствуйте. Пытаюсь эту же задачу решить без использования select.
Разметка:

<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))
    .children()
    .show()
    .filter((i, n) => +n.value < min)
    .hide();
 }).change();

Заметил, что на этапе $('#val-year1').change() изменение значения iput уже не отслеживается.
Помогите пожалуйста.

[0xD34F]

TuMko, перед childern надо вызвать next. Фильтровать - по dataset.year вместо value.

[TuMko]

0xD34F, изменил, но значения не сразу меняются, а только после того, как в input внести изменения с клавиатуры, к примеру поставить пробел. У меня при клике по li значение передается в input и уже оттуда фильтруется.

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();

Так же подскажите, пожалуйста, как сделать, чтобы при фильтрации во втором списке, если в списке больше нет активных, добавлялся класс aсtive первому по списку li?

[0xD34F]

TuMko, разбираться, чего у вас там происходит при кликах по каким-то li я не буду - к исходному вопросу это никакого отношения не имеет. Оформляйте новый.