【Javascript】指定された年月によって日を変更する
selectで年月日を選択させる。
月によっては月末の日が異なるため、実在しない日は選択できないようにする。
年、月、日のhtmlは以下のとおり。それぞれにidを設定しておく。
日は月を選択しないと意味がないため、選択できないようにしておく。
何も選択しないで送信するフールプルーフ対策として、デフォルト値は
「選択なし」にしておく。
年と月のonchangeイベントで日を変更するjavascriptを呼び出す。
生年月日<br> <select id="year" name="year" onchange="changeday()> <option value="" selected>選択してください</option> <option value="2001">2001(平成13)</option> <option value="2002">2002(平成14)</option> </select> 年 <select id="month" name="month" onchange="changeday()"> <option value="" selected>選択</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> 月 <select id="day" name="day"> <option value="" selected>選択</option> </select> 日
javascriptでは、formの年と月を見て、
日のselectの子要素(option)をすべて書き換える。
要素の指定はgetElementbyIdでも良いけどjQueryで。
function changeday(){ var year = $('#year').val(); var month = $('#month').val(); var day = $('#day').val(); var lastday = new Array('', 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); var option = '<option value="">選択</option>'; //うるう年対策 if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0){ lastday[2] = 29; } for (var i = 1; i <= lastday[month]; i++) { if (i == day){ option += '<option value="' + i + '" selected="selected">' + i + '</option>\n'; }else{ option += '<option value="' + i + '">' + i + '</option>\n'; } } $('#day').html(option); }