現在、一意の日付文字列のセットがあります
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>');
}
});
選択ボックスの年または月が変更された場合、対応する値を追加しますが、ユーザーが月を変更すると、年を変更するために戻ることができるため、問題を解決するにはどうすればよいですか? または、それを行うために推奨されるより簡単な方法はありますか?ありがとう