0

現在、一意の日付文字列のセットがあります

eg.

2012 04 01
2012 04 10
2012 04 25
2012 06 30
2012 06 10
2012 12 01
2013 04 01

私がする必要があるのは、年用、月用、日用の 3 つの選択ボックスを作成することです。

問題は、年月と日の関係を維持する必要があることです

たとえば、ユーザーは最初に 2012 2013 を表示できます。次に、月として 2012、04、06、12 が表示される場合、月として 04 を選択すると、日として 01、10、25 が表示されます。

実装は次のとおりです。

                for (var key in data) {
                    year = key.substring(0,4);
                    if ($.inArray(year, yearArr) == '-1'){
                        yearArr.push(year);
                        $('#year').append('<option value="' + year + '">' + year + '</option>');
                    }
                    dateArr.push(key);
                    chtml.push("<tr><td>" + key + "</td><td>" + data[key] + "</td></tr>");
                }

Key は各日付文字列で、dateArr にはすべての日付が格納されます

$("#year").change(function(){
    var month;
    var monthArr = [];
    var selectedValue = $(this).find(":selected").val();
    if (selectedValue !== '-1') {
        $('#month').prop("disabled", false);
        $('#month').empty().append('<option value="-1">Please choose</option>');
        for (var key in dateArr) {
            if (selectedValue == key.substring(0,4)) {
                month = key.substring(4,2);
                if ($.inArray(month, monthArr) == '-1'){
                    monthArr.push(month);
                    $('#month').append('<option value="' + month + '">' + month + '</option>');
                }
            }
        }
    } else {
        $('#month,#day').empty().append('<option value="-1">Please choose</option>');
    }
});

$("#month").change(function(){
    var day;
    var dayArr = [];
    var selectedValue = $("#year").find(":selected").val() + $(this).find(":selected").val();
    if (selectedValue !== '-1') {
        $('#day').prop("disabled", false);
        $('#day').empty().append('<option value="-1">Please choose</option>');
        for (var key in dateArr) {
            if (selectedValue == key.substring(0,6)) {
                day = key.substring(6,2);
                if ($.inArray(day, dayArr) == '-1'){
                    dayArr.push(day);
                    $('#day').append('<option value="' + day + '">' + day + '</option>');
                }
            }
        }
    } else {
        $('#month,#day').empty().append('<option value="-1">Please choose</option>');
    }
});

選択ボックスの年または月が変更された場合、対応する値を追加しますが、ユーザーが月を変更すると、年を変更するために戻ることができるため、問題を解決するにはどうすればよいですか? または、それを行うために推奨されるより簡単な方法はありますか?ありがとう

4

0 に答える 0