Two dropdown select objects, disable some options of no 2 dependent on choice in no 1 in jQuery

Question

I have the following function in 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();
  });
});

Which functions on the following 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>

The idea is, that by selecting a year, different subsets of months need to disabled/enabled. I don't seem to get this working despite many similar but subtly different examples.

Any suggestion? Where do I go wrong?

(NOTE: the slideup/down are for other functionality which does work. I did include it, you never know :) )

Answer 1

You had the ID attribute set with #01, so the selector would need to be ##01. This is not going to work well, so you will want to remove the # from the ID Attribute. Please review Snippet:

$(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>

I also used the switch() statement versus a number of if() statements. In the HTML, I added a blank Option. This allows the User to actually make a change to one of the options tested for.