プルダウンで選択した月のデータを表示したいのですが、うまくいかず困っています。

Question

前提・実現したいこと

簡易的な勤怠システムの作成をしています。
日毎のデータを表形式で配置し、プルダウンで表示するデータの月を変更できる仕様にしたいのですが、うまくいきません。

該当のソースコード

$(function() {
  var date = new Date();
  var year = date.getFullYear();
  var weekday = [ "日", "月", "火", "水", "木", "金", "土" ];

  // 選択された年月日を取得
  var selected_year = document.getElementById("id_year");
  var selected_month = document.getElementById("id_month");
  let selected_dayCount = 1; // 日にちのカウント
  let calendarHtml = ''; // HTMLを組み立てる変数

  // プルダウン
  $(function() {
    /*ループ処理*/
    optionLoop = function(start, end, id) {
      var i, opt;
      opt = null;
      for (i = end; i >= start ; i--) {
        if (i === date) {
          opt += "<option value='" + i + "' selected>" + i + "</option>";
        } else {
          opt += "<option value='" + i + "'>" + i + "</option>";
        }
      }
      return document.getElementById(id).innerHTML = opt;
    };

    /*関数設定*/
    optionLoop(1990, year, 'id_year');
    optionLoop(1, 12, 'id_month');
  });
  
  
  // カレンダー
  calendarHtml += '<table>';

    // 見出し
      calendarHtml += '<tr>'+'<th>'+"日"+'</th>'
      +'<th>'+"曜日"+'</th>'
      +'<th>'+"開始"+'</th>'
      +'<th>'+"終了"+'</th>'
      +'<th>'+"休憩(h)"+'</th>'
      +'<th>'+"勤務時間(h)"+'</th>'
      +'<th>'+"出欠"+'</th>'
      +'</tr>';

    // 日付
    $('#id_year,#id_month').change(function() {
        
      selected_year = $('#id_year').val();
      selected_month = $('#id_month').val();

      //選択月初日
      var selected_startDate = new Date( selected_year, selected_month - 1, 1);
      //月の最後の日
      var selected_endDate = new Date(selected_year, selected_month,  0);
      // 月の末日
      var selected_endDayCount = selected_endDate.getDate();
      // 月の最初の日の曜日を取得
      var selected_startDay = selected_startDate.getDay();
      let selected_weekCount = selected_startDay; // 曜日のカウント

        for (let i = 0; i < selected_endDayCount; ++i) {
          // 日付の生成
          calendarHtml += '<tr>'+ '<td>' + selected_dayCount + '</td>';
          selected_dayCount++;
            // 曜日の生成
            calendarHtml += '<td>' + weekday[selected_weekCount] + '</td>'+ '</tr>';
            if(selected_weekCount >= 6) {
              selected_weekCount = 0;
            } else {
              selected_weekCount++;
            }
        }
    })
        calendarHtml += '</table>';
        document.querySelector('#calendar').innerHTML = calendarHtml;
});

        <h1>勤怠一覧</h1>
        
      </div>
      <div class="select">
        
        <select class="cl_year" id="id_year">
        </select>
        <a href="#" class="moji">
          年
        </a>
        <select class="cl_month" id="id_month" name="name_month">
        </select>
        <a href="#" class="moji">
          月
        </a>
        
        <a href="#" class="hyoji">表示</a>
        
        <table class="tableAll">
          <tr>
            <th>実労働時間(h)</th>
            <td>h</td>
            <th>残業時間(h)</th>
            <td>h</td>
            <th>休憩時間(h)</th>
            <td>h</td>
          </tr>
        </table>
      </a>
      
      <a href="#" class="logout">ログアウト</a>
    </div>
    
    <table>
      <div id="calendar"></div>
    </table>
    
    <script type="text/javascript" src="itiran.short.js"></script>

試したこと

JavaScriptだけで作成する方法がヒットしなかったため、jqueryも入れてみましたが、うまく動作していないようです。

補足情報（FW/ツールのバージョンなど）

不足情報あればご指摘お願いいたします。

何かご存じの方がいらっしゃいましたらお教えいただけると助かります。
よろしくお願いいたします。

Answer 1

年と月は普通にselectで書けばよいでしょう
年と月がきまれば
new Date("2020-06-02")のような渡し方をすればその月のデータになるでしょう

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const y=document.querySelector('#id_year');
  const m=document.querySelector('#id_month');
  const v=document.querySelector('#view');
  document.querySelector('#chk').addEventListener('click',()=>{
    v.textContent=new Date(`${y.value}-${m.value}-01`);
  });
});
</script>
<select class="cl_year" id="id_year">
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
</select>
年
<select class="cl_month" id="id_month">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
</select>
月
<input type="button" value="check" id="chk">
<div id="view"></div>

Comments

[moe_ko]

ご回答ありがとうございます。
これは、ボタンを押さなければ動作しないコードでしょうか……？
ボタンの作成を省きたいです。

[yambejp]

選択した瞬間に処理したいならこう
window.addEventListener('DOMContentLoaded', ()=>{
const y=document.querySelector('#id_year');
const m=document.querySelector('#id_month');
const v=document.querySelector('#view');
const view=()=>v.textContent=new Date(`${y.value}-${m.value}-01`);
view();
document.addEventListener('input',e=>{
if(e.target.closest('select')) view();
});
});

[moe_ko]

ご丁寧にありがとうございます。
助かります。