0

次のフィドルを使用して、javascript ドロップダウンを作成することができました。

(function() {
    var calendar = [
        ["January", 31],
        ["February", 28],
        ["March", 31],
        ["April", 30],
        ["May", 31],
        ["June", 30],
        ["July", 31],
        ["August", 31],
        ["September", 30],
        ["October", 31],
        ["November", 30],
        ["December", 31]
        ],
        cont = document.getElementById('calendar-container');
    // setup
    var sel_year = document.createElement('select'),
        sel_month = document.createElement('select'),
        sel_day = document.createElement('select');

    function createOption(txt, val) {
        var option = document.createElement('option');
        option.value = val;
        option.appendChild(document.createTextNode(txt));
        return option;
    }

    function clearChildren(ele) {
        while (ele.hasChildNodes()) {
            ele.removeChild(ele.lastChild);
        }
    }

    function recalculateDays() {
        var month_index = sel_month.value,
            df = document.createDocumentFragment();
        for (var i = 0, l = calendar[month_index][1]; i < l; i++) {
            df.appendChild(createOption(i + 1, i));
        }
        clearChildren(sel_day);
        sel_day.appendChild(df);
    }

    function generateMonths() {
        var df = document.createDocumentFragment();
        calendar.forEach(function(info, i) {
            df.appendChild(createOption(info[0], i));
        });
        clearChildren(sel_month);
        sel_month.appendChild(df);
    }

    sel_month.onchange = recalculateDays;

    generateMonths();
    recalculateDays();

    cont.appendChild(sel_year);
    cont.appendChild(sel_month);
    cont.appendChild(sel_day);
}());

http://jsfiddle.net/rlemon/j2kzv/

ただし、デフォルトで現在の月と日付を表示するように変更したいと思います。助言がありますか？

4

1 に答える 1

0

このようなものはうまくいきます：http://jsfiddle.net/j2kzv/24/

オプションを作成するときに、現在の日付に対するチェックを追加しただけで、あまり変更しませんでした。

calendar.forEach(function(info, i) {
            var selected = (currentDate.getMonth() === i) ? true : false;
            df.appendChild(createOption(info[0], i, selected));
});

次に、各オプションを作成するときに選択したチェックを追加しました。

function createOption(txt, val, selected) {
    var option = document.createElement('option');
    option.value = val;
    option.selected = selected;
    option.appendChild(document.createTextNode(txt));
    return option;
}

簡単にするために、チェックボックスの値に0ではなく序数1を使用するように、ループの日付関数も更新しました

于 2012-12-10T21:38:12.937 に答える