読者です 読者をやめる 読者になる 読者になる

Ba.とWEBと梅干し太郎

WEB制作・プログラミング・音楽の学習したこと・つくったもののアウトプットブログです。あとは日記。

月・週・日・時・分の単位に応じてセレクタの値を変えるJava Sctipt

WEB & プログラミング

selectタブで選択している値に併せて、別のselectタブのvalueを変えたい場面に出くわしました。
日付のように連続した数字を扱う時に使えるメソッドを考えたので、忘備録としてメモします。

必要なoptionタグをhtmlに用意しておいて表示・非表示を切り替えるとhtmlの可読性が落ちるなあと思ったので、親のselectが変わる度にJSで子selectのoptionタグを生成しています。
処理としては単純で、selectの値に併せて配列を生成して、それを元にoptionタグを生成しています。
それらを親selectの値が変わった時に実行してあげる、といった流れです。

/**
 * 親selectの単位に応じて、optionの値を変更する
 * 選択された単位ごとに数値となる配列を生成し、optionタグを書き換える
 */
function setSelectSetting() {
    $('#selectUnit').change(function() {
        var selectUnit = $('#selectUnit').val();

        $('#selectTime').html($('<option></option>'))
            .val('')
            .text('-');

        if(selectUnit == '分') {
            var content = valueMaker(60);
            optionMaker(content);
        }
        else if(selectUnit == '時') {
            var content = valueMaker(24);
            optionMaker(content);
        }
        else if(selectUnit == '日') {
            var content = valueMaker(31);
            optionMaker(content);
        }
        else if(selectUnit == '週') {
            var content = valueMaker(4);
            optionMaker(content);
        }
        else if(selectUnit == '月') {
            var content = valueMaker(12);
            optionMaker(content);
        }
    });
}

/**
 * selectの値を生成するための配列生成メソッド
 * @param {integer} maxNum Number to array
 */
function valueMaker(maxNum) {
    var numbers = [];
    for( var i=1; numbers.push(i++) < maxNum;);
    return numbers;
}

/**
 * selectの値を書き換えるためのメソッド
 * @param {array} content Create option's values and names from content
 */
function optionMaker(content) {
    $.each(content, function() {
        $('#selectTime').append($('<option></option>')
                .val(this)
                .text(this));
    });
}

変更する度にoptionタグが増える、なんてことがないように実行時には必ずhtmlでoptionを空上書きしてから生成しています。
また使うことありそうです。

最初はよく分からない子だな、と思っていたJava Scriptちゃんですが、最近は結構好きです。
なかなか楽しい。

【余談】
コメントが緑でハイライトされるのすごい違和感が、、。