セレクトボックスで年／月を選択させ、月ごとの明細を表示させたい

Question

javascript初心者です。

ご利用年のセレクトボックス／ご利用月のセレクトボックス
をそれぞれ選択し、その月の明細を見せるような機能を実現したいです。

以下のコードで、なんとなくはできたのですが、これだと、
ご利用年→ご利用月の選択をしたのち、ご利用年を変更させた場合に、
明細の内容が変わらないというところで困っております。
どなたかご教授いただけないでしょうか。
コードは簡略化しております。

何卒よろしくお願いします。

HTML

<select id="selectYear">
<option value="2021">ご利用年：2021年</option>
<option value="2020">ご利用年：2020年</option>
</select>  


<select id="2021" class="month">
<option value="2021-1">ご利用月：1月</option>
<option value="2021-2">ご利用月：2月</option>
</select>  

<select id="2020" class="month">
<option value="2020-1">ご利用月：1月</option>
<option value="2020-2">ご利用月：2月</option>
</select>  

<div id="2021-1" class="result">
2021年1月の明細
</div>  

<div id="2021-2" class="result">
2021年2月の明細
</div>  

<div id="2020-1" class="result">
2020年1月の明細
</div>  

<div id="2020-2" class="result">
2020年2月の明細
</div>

javascript

<script>
  
$(function(){
//明細年月選択	
  $('#selectYear').change(function () {
    //選択したoptionのvalueを取得
    var val = $(this).val();
    //先頭に#を付けてvalueの値をidに変換
    var selectYearId = '#' + val;
    //一度すべてのブロックを非表示にする
    $('.month').hide();
    //選択したブロックのみを表示
    $(selectYearId).show();
  });
});
  
//明細表示	
$(function(){
  $('.month').change(function () {
    //選択したoptionのvalueを取得
    var val = $(this).val();
    //先頭に#を付けてvalueの値をidに変換
    var monthId = '#' + val;
    //一度すべてのブロックを非表示にする
    $('.result').hide();
    //選択したブロックのみを表示
    $(monthId).show();
  });
});
</script>

css

.month:nth-of-type(n+2){
  display: none; 
  }
.result:nth-of-type(n+2){
  display: none; 
  }

Answer 1

2つもmonthはいらないですよね？組み合わせですから

<style>
.result:not(.active){
display:none;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('#y,#m').forEach(x=>{
    x.addEventListener('change',()=>{
      document.querySelector('.result.active')?.classList.remove('active');
      document.querySelector('.y'+document.querySelector('#y').value+".m"+document.querySelector('#m').value).classList.add('active');
    });
  });
});
</script>
<select id="y">
<option value="2021">ご利用年：2021年</option>
<option value="2020">ご利用年：2020年</option>
</select>  
<select id="m">
<option value="1">ご利用月：1月</option>
<option value="2">ご利用月：2月</option>
</select>  

<div class="result y2021 m1">
2021年1月の明細
</div>  

<div class="result y2021 m2">
2021年2月の明細
</div>  

<div class="result y2020 m1">
2020年1月の明細
</div>  

<div class="result y2020 m2">
2020年2月の明細
</div>

Comments

[ymnm]

ありがとうございました！
大変勉強になりました。感謝いたします。

[ymnm]

動作確認をしたところ、macのsafariでだけ、動作しませんでした。（iPhoneでは動作しました。）
コンソールを確認したところ、『SyntaxError: Unexpected token '.'』というエラーが出ており、「.」を消すなどしてみましたが、わからず。
厚かましいとは思いますが、わかりますでしょうか。申し訳ございません。

[yambejp]

具体的にどの行がエラーなのかわかりますか？
オプショナルチェイニングはsafariも対応していると思いますが・・・

x.addEventListener('change',()=>{
var y=document.querySelector('.result.active');
if(y) y.classList.remove('active');
document.querySelector('.y'+document.querySelector('#y').value+".m"+document.querySelector('#m').value).classList.add('active');
});

のようにすればいけますか？

[ymnm]

お返事ありがとうございます。

document.querySelector('.result.active')?.classList.remove('active');
の行にエラーが出てました。

ですが、いただいたコードで動作いたしました！
ありがとうございます！

[yambejp]

参考：
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining