ニュースリリース
jQuery 選択された年月に合わせて日のプルダウンを制御しよう

2018.07.05

jQuery

jQuery 選択された年月に合わせて日のプルダウンを制御しよう

1,662

年月日を選択させたい時ってありますよね？
私もそんな大勢の中の一人です。
その中で困るのが存在しない日を選択されることだと思います。
それが自分の生年月日だったら間違う方に問題があると私は思ってしまうのですが、問題は予約フォームだったりした場合です。

エンドユーザーとしては何気なく日付を選択したつもりでも日付の正当性チェックを組み込み忘れていると、それで通ってしまうという可能性は考えられます。
そうなると困るのは通知を受け取る運営側です。
せっかく自動化しているのに日付の確認をする為にエンドユーザーへ電話をして整合性を取る必要が出てきます。

対策としては上述した日付の正当性チェックを組み込むこと。
他にはdatepicker等のカレンダープラグインを使用するという手もありますね。
今回はそのどれでもなく、プルダウンで「年月」を選択した場合に「日」のプルダウンのoption要素そのものを変更するやり方をご紹介します。

まず最初に組み込んだのがこちらです。

function changeDayForm() {
    // 年月日の値を変数に格納
    // 日のプルダウンは後で書き換えを行う為、要素も格納
    var year  = $( "[name='year']" ).val();
    var month = $( "[name='month']" ).val();
    var day_e = $( "[name='day']" );
    var day   = day_e.val();

    // 年月の入力チェック
    if ( year.length > 0 && month.length > 0 ) {
        // 年月が入力済みなら処理
        var dt = new Date(); // インスタンスを取得
        // 該当月の最終日を取得
        var ld = new Date( year , month , 0 ).getDate();
        var i  = 0;
        var options_html = '--';
        day_e.find( "option" ).each(function(index, element){
            if ( $(this).attr( "value" ) > ld ) {
                $(this).remove();
            }
            i ++;
        });
        if ( ld > i ) {
            // 現在のプルダウンが取得した最終日を下回るなら処理
            for ( var j ; j <= ld ; j ++ ) {
                day_e.append( '<option value="' + j + '">' + j + "</option>" );
            }
        }
        if ( day.length > 0 && ld >= day ) {
            // 選択済みの日があり、且つ、最終日を上回らないならselected
            day_e.html( options_html ).val( day ).change();
        } else {
            day_e.html( options_html ).val( "" ).change();
        }
    }
}

$(function(){
    $( "[name='year'] , [name='month']" ).on( "change" , function () {
        changeDayForm();
    });
});

function changeDayForm() {

// 年月日の値を変数に格納

// 日のプルダウンは後で書き換えを行う為、要素も格納

var year = $( "[name='year']" ).val();

var month = $( "[name='month']" ).val();

var day_e = $( "[name='day']" );

var day = day_e.val();

// 年月の入力チェック

if ( year.length > 0 && month.length > 0 ) {

// 年月が入力済みなら処理

var dt = new Date(); // インスタンスを取得

// 該当月の最終日を取得

var ld = new Date( year , month , 0 ).getDate();

var i = 0;

var options_html = '--';

day_e.find( "option" ).each(function(index, element){

if ( $(this).attr( "value" ) > ld ) {

$(this).remove();

}

i ++;

});

if ( ld > i ) {

// 現在のプルダウンが取得した最終日を下回るなら処理

for ( var j ; j <= ld ; j ++ ) {

day_e.append( '<option value="' + j + '">' + j + "</option>" );

}

if ( day.length > 0 && ld >= day ) {

// 選択済みの日があり、且つ、最終日を上回らないならselected

day_e.html( options_html ).val( day ).change();

} else {

day_e.html( options_html ).val( "" ).change();

}

$(function(){

$( "[name='year'] , [name='month']" ).on( "change" , function () {

changeDayForm();

});

年月が選択された時に処理発生⇒new Date()を使って対象とした年月の最終日を求めて、
option要素をループして求めた最終日を超えたものをremove()しています。
逆に不足している場合は、要素にappend()してoption要素を追加するだけですね。

これで終わりだと思ったのですが、IEでエラーが発生しました。

またIE(´-ω-)=3

remove()を使っちゃ駄目とのこと。
普通に使っていた記憶があるのですが、option要素ではダメ？

そちらをクリアするよりは、やり方を変えた方が早そうなので、remove()を使わない方向で変更しましたのが以下

function changeDayForm() {
    // 年月日の値を変数に格納
    // 日のプルダウンは後で書き換えを行う為、要素も格納
    var year  = $( "[name='year']" ).val();
    var month = $( "[name='month']" ).val();
    var day_e = $( "[name='day']" );
    var day   = day_e.val();

    // 年月の入力チェック
    if ( year.length > 0 && month.length > 0 ) {
        // 年月が入力済みなら処理
        var dt = new Date(); // インスタンスを取得
        // 該当月の最終日を取得
        var ld = new Date( year , month , 0 ).getDate();
        var i  = 0;
        var options_html = '--';
        for ( i = 1 ; i <= ld ; i ++ ) {
            options_html += '<option value="' + i + '">' + i + "</option>";
        }
        if ( day.length > 0 && ld >= day ) {
            // 選択済みの日があり、且つ、最終日を上回らないならselected
            day_e.html( options_html ).val( day ).change();
        } else {
            day_e.html( options_html ).val( "" ).change();
        }
    }
}