JavaScript ：選択したoption valueの値を取得したい。

Question

**HTMLで作成した問い合わせフォームの中に、日付を選択出来るようなセレクトボックスを実装したいのですが、日付を選択した時に、対応した月のデータを取得することが出来ないです。**エラーは出ていませんが、ご教授頂けると幸いです。

--困っていること／実現させたいこと--
年度の初めの１月がデフォルトで選択されてしまっている状態になっていますが、選択した月を取得したいのです。(6月を選択したら、<option value="6">6月</option>が表示される状態にしたい。現在の表示だと、<option value="1">1月</option>と表示されてしまっている。)

<form action="date">
<h4 style="clear:both">申し込み日程</h4>
    <select name="month" id="month" style="width:48%; float:left;padding:10px;"> </select>
    <script>
  document.createElement("option");
  for (let i = 1; i <= 12; i++) {
  let option = document.createElement("option");
  option.setAttribute("value", i);
  option.innerHTML = i + "月";
  month.appendChild(option);}
</script>

<select name="date" id="date" style="width:48%; float:right;padding:10px;"> </select>
<script>

document.addEventListener('DOMContentLoaded', 
function() {
/*このあたりの記述が怪しい。*/
var month = document.querySelector('#month option');
var date = document.querySelector('#date option');
console.log(month);

//月ごとの日数を変数に代入する
if (month === 2) {
lastday = 28;
if (month === 4 || 6 || 9 || 11) {
lastday = 30;
}else{
lastday = 31;
}
}
//各月に対応した日数を表示する
for (let j = 1; j <= lastday; j++) {
let option = document.createElement("option");
option.setAttribute("value", j);
option.innerHTML = j + "日";
date.appendChild(option);
};
});
</script>

</form>

Answer 1

ざっとやるとこんな感じです

• codepen month date

Comments

[ah6BD2gZo5GnjnT]

私のやり方が見当違い過ぎて、途方に暮れております。