Webエンジニア 新人日記

Webエンジニアになりました。元々はCOBOLやらBASICやらでプログラムしてました。C言語やVisualBasicは趣味でやっていましたが、久々に現場復帰ということです。資格はエンベデッドスペシャリスト、DBスペシャリスト、ネットワークスペシャリスト、セキュリティスペシャリスト、システムアーキテクト、プロジェクトマネージャ他を所有

【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);
}