Два выпадающих списка выбранных объектов, отключите некоторые опции без 2, в зависимости от выбора нет 1 в jQuery

Question

У меня есть следующая функция в jQuery:

$(function() {
  $('.jqueryOptions').hide();
  $('.AllYearsAllMonths').show();
  $('#year').change(function() {
    if ( $(this).val() == 'AllYears') {
      $('#03','#04','#05').prop("disabled", true);
    } if ( $(this).val() == '2019') {
      $('#01','#02','#03','#04','#05').prop("disabled", true);
    } if ( $(this).val() == '2020') {
      $('#03','#04','#05','#06','#07','#08','#09','#10','#11','#12').prop("disabled", true);
    }
    $('.jqueryOptions').slideUp();
    $("." + $(this).val() + $('#month').val()).slideDown();
  });
  $('#month').change(function() {
    $('.jqueryOptions').slideUp();
    $("." + $('#year').val() + $(this).val()).slideDown();
  });
});

Какие функции на следующие HTML select:

<select id="year">
<option value="AllYears" selected>All Time</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<select id="month">
<option value="AllMonths" selected>All Months</option>
<option value="Jan" id="#01">januari</option>
<option value="Feb" id="#02">februari</option>
<option value="Mar" id="#03">maart</option>
<option value="Apr" id="#04">april</option>
<option value="May" id="#05">mei</option>
<option value="Jun" id="#06">juni</option>
<option value="Jul" id="#07">juli</option>
<option value="Aug" id="#08">augustus</option>
<option value="Sep" id="#09">september</option>
<option value="Oct" id="#10">oktober</option>
<option value="Nov" id="#11">november</option>
<option value="Dec" id="#12">december</option>
</select>

Идея состоит в том, что, выбрав год Различные подмножества месяцев необходимо отключить / включить. Мне кажется, что это не работает, несмотря на множество похожих, но немного разных примеров.

Есть предложения? Где я go не прав?

(ПРИМЕЧАНИЕ: слайд / вниз предназначены для других функций, которые работают. Я включил их, вы никогда не знаете :))

Answer 1

Надеюсь, это поможет вам.

$(document).ready(function() {
  $('#year').val('AllYears').change();
});
$('#year').on('change', function() {
  select_option_disable($('#year').val());
});

function select_option_disable(disable_option) {
  var disabled_list = $("#year option[value='" + disable_option + "']").attr('data-disable');
  console.log(disabled_list);
  disabled_list = disabled_list.split(',');
  $("#month option").attr('disabled', false);
  disabled_list.forEach(function(item) {
    $("#month option[value='" + item + "']").attr('disabled', true);
  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select id="year">
  <option value="AllYears" data-disable="Mar,Apr,May" selected>All Years</option>
  <option value="2019" data-disable="Jan,Feb,Mar">2019</option>
  <option value="2020" data-disable="Apr,May,Jun">2020</option>
</select>
<select id="month">
  <option value="AllMonths" selected>All Months</option>
  <option value="Jan" id="#01">januari</option>
  <option value="Feb" id="#02">februari</option>
  <option value="Mar" id="#03">maart</option>
  <option value="Apr" id="#04">april</option>
  <option value="May" id="#05">mei</option>
  <option value="Jun" id="#06">juni</option>
  <option value="Jul" id="#07">juli</option>
  <option value="Aug" id="#08">augustus</option>
  <option value="Sep" id="#09">september</option>
  <option value="Oct" id="#10">oktober</option>
  <option value="Nov" id="#11">november</option>
  <option value="Dec" id="#12">december</option>
</select>

Answer 2

Атрибут ID установлен с #01, поэтому селектор должен быть ##01. Это не будет работать хорошо, поэтому вам нужно удалить # из атрибута ID. Пожалуйста, просмотрите сниппет:

$(function() {
  //$('.jqueryOptions').hide();
  //$('.AllYearsAllMonths').show();
  $('#year').change(function() {
    var v = $(this).val();
    console.log(v);
    switch (v) {
      case "AllYears":
        console.log("Case 1");
        $("#03, #04, #05").prop("disabled", true);
        break;
      case "2019":
        console.log("Case 2");
        $("#01, #02, #03, #04, #05").prop("disabled", true);
        break;
      case "2020":
        console.log("Case 3");
        $("#03, #04, #05, #06, #07, #08, #09, #10, #11").prop("disabled", true);
        break;
    }
    //$('.jqueryOptions').slideUp();
    //$("." + $(this).val() + $('#month').val()).slideDown();
  });
  $('#month').change(function() {
    //$('.jqueryOptions').slideUp();
    //$("." + $('#year').val() + $(this).val()).slideDown();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="year">
  <option></option>
  <option value="AllYears">All Time</option>
  <option value="2019">2019</option>
  <option value="2020">2020</option>
</select>
<select id="month">
  <option></option>
  <option value="AllMonths">All Months</option>
  <option value="Jan" id="01">januari</option>
  <option value="Feb" id="02">februari</option>
  <option value="Mar" id="03">maart</option>
  <option value="Apr" id="04">april</option>
  <option value="May" id="05">mei</option>
  <option value="Jun" id="06">juni</option>
  <option value="Jul" id="07">juli</option>
  <option value="Aug" id="08">augustus</option>
  <option value="Sep" id="09">september</option>
  <option value="Oct" id="10">oktober</option>
  <option value="Nov" id="11">november</option>
  <option value="Dec" id="12">december</option>
</select>

Я также использовал оператор switch() против ряда операторов if(). В HTML я добавил пустой параметр. Это позволяет пользователю фактически внести изменения в один из протестированных вариантов.