@TuMko

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

Есть два 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 );

  }
  • Вопрос задан
  • 41 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
$('#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();
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽