我需要添加一个标准下拉列表,您可以从中选择一个日期值(月/年),并且根据您选择的日期,三个复选框将显示在下一个下拉列表的正下方3 个日历季度。
例如。如果您从下拉列表中选择 2011 年 9 月,它将显示 2011 年第 4 季度、2012 年第 1 季度、2012 年第 2 季度的复选框。由于 2011 年 9 月是 2011 年第 3 季度。
有没有办法在不硬编码年份值的情况下做到这一点?我感谢您的帮助!
选择标记为:
<select name="selectMonth">
<option value="month1">Janurary 2011/option>
<option value="month2">June 2011</option>
<option value="month3">December 2011</option>
<option value="month3">February 2012</option>
</select>
这是我 friend 的 JS 解释,尽管它使用了时间戳:
var Selected = "2012-03-28";
var Date = new Date(Selected);
var After = Date.getMonth()+3;
var Before = Date.getMonth()-3;
function sayQuarter(date) {
var m = Date.getMonth(date);
var y = Date.getYear(date);
var q = floor((m / 3) + 0.9);
if (q.length == 1) { q = "0"+q; }
return "Q"+q+" "+y;
}
var output = "3mo Before = "+Before+" ... "+sayQuarter.Before+"<br/>"+
"Selected = "+Selected+" ... "+sayQuarter.Selected+"<br/>"+
"3mo After = "+After+" ... "+sayQuarter.After+"<br/>";
if (document.getElementById('hello')) {
document.getElementById('hello').innerHTML = output;
}
我基本上需要使用 Javascript 来完成此操作,并根据选择下拉列表中的值进行检查。想法?
最佳答案
首先,我们要准备一些元素。由于您不想每年都保存,因此最好动态创建 select
元素:
var monthSelection = document.createElement('select');
var yearSelection = document.createElement('select');
var quartalWrapper = document.createElement('div');
我们在页面加载时填充它们并将它们添加到文档中:
window.addEventListener('load',function(){
var monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var i;
var option;
for(i = 0; i < 12; ++i){
option = document.createElement('option');
option.value = i;
option.appendChild(document.createTextNode(monthNames[i]));
monthSelection.appendChild(option);
}
for(i = firstYear; i <= lastYear; ++i){
option = document.createElement('option');
option.value = i;
option.appendChild(document.createTextNode(i));
yearSelection.appendChild(option);
}
// Append elements to the document
document.getElementById('quartal').appendChild(monthSelection);
document.getElementById('quartal').appendChild(yearSelection);
// Add an event listener
monthSelection.addEventListener('change',updateQuartals);
yearSelection.addEventListener('change',updateQuartals);
});
请注意,您必须在版本 9(?) 之前的 Internet Explorer 中使用 attachEvent
或 .onload
/.onchange
,而不是addEventListener
。您也可以在脚本的开头创建和填充元素,但无法在加载 DOM 之前附加它们。
现在,当用户更改 monthSelection
或 yearSelection
中的值时,将调用 updateQuartals
:
window.updateQuartals = function (){
var i;
if( oldMonth === monthSelection.value &&
oldYear === yearSelection.value)
{
return;
}
如果 quartalWrapper
没有父节点,我们将创建标签和复选框,因为这意味着它尚未附加到文档中:
if(!quartalWrapper.parentNode){
for(i = 0; i < 3; ++i){
var label = document.createElement('label');
var input = document.createElement('input');
input.type = 'checkbox';
input.name = 'quartal[]';
label.appendChild(input);
label.appendChild(document.createTextNode('Please choose a date'));
quartalWrapper.appendChild(label);
}
document.getElementById('quartal').appendChild(quartalWrapper);
}
然后我们将更新所有三个子标签和复选框。请注意,label.firstChild
是复选框,而label.lastChild
是我们上面创建的textNode
。 quartalWrapper.childNodes[i]
实际上是 label
之一。
for(i = 0; i < 3; ++i){
var quartals = getQuartals(monthSelection.value);
var year = quartals[i][1] + parseInt(yearSelection.value);
quartalWrapper.childNodes[i].firstChild.value = 'q'+quartals[i][0]+'/'+year;
quartalWrapper.childNodes[i].firstChild.checked = false;
quartalWrapper.childNodes[i].lastChild.data = quartals[i][0]+'Q '+year;
}
};
由于始终为给定月份定义以下 quartals,我们可以将它们硬编码到函数 getQuartals
中:
window.getQuartals = function(month){
var quartArray = [];
if (month < 3)
return [[2,0],[3,0],[4,0]];
if (month < 6)
return [[3,0],[4,0],[1,1]];
if (month < 9)
return [[4,0],[1,1],[2,1]];
return [[1,1],[2,1],[3,1]];
}
请注意,第一个值是季度,第二个值是年份偏移量。您还可以计算这些数组:
window.getQuartals = function(month){
var quartArray = [];
var i;
month = parseInt(month);
for(i = 0; i < 3; ++i){
month+=3;
quartArray.push([Math.floor(month/3)%4+1,Math.floor(month/12)]);
}
return quartArray;
}
Jsfiddle演示:using hardcoded values , using calculation .
请注意,此解决方案不使用 jQuery。如果您想使用 jQuery,请随意更改代码(使用 $()
或 .on
而不是 addEventListener()
,.append
,...)。
关于javascript - 在 jQuery 中,如何根据从下拉列表中选择的月份来增加年份,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9908911/