javascript - 在 jQuery 中,您将如何根据从下拉列表中选择的月份来增加年份

标签 javascript jquery date select

我需要添加一个标准下拉列表,您可以从中选择一个日期值(月/年),并根据您选择的日期,三个复选框将显示在接下来 3 个日历季度的下拉列表的正下方.

例如。如果您从下拉列表中选择 2011 年 9 月,它将显示 2011 年第四季度、2012 年第一季度、2012 年第二季度的复选框。因为 2011 年 9 月是 2011 年第三季度。

有没有办法在不硬编码年份值的情况下做到这一点?感谢您的帮助!

选择标记将是:

<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);
});

请注意,您必须使用 attachEvent.onload/.onchange在 Internet Explorer 9(?) 之前的版本中,而不是 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.lastChildtextNode我们在上面创建。 quartalWrapper.childNodes[i]实际上是 label 之一s。
    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/

相关文章:

javascript - jquery文本字段转换为大写/小写

java - Java中有实例化的默认日期吗?

java - java中的有效性比较

javascript - Javascript图像不会显示

javascript - 在页面加载时选择具有多个选定值的选择框

jquery - 如何使用 jQuery 禁用 CKeditor

jquery - 单击启用/禁用div

javascript - Angular - 如何防止 RxJs fromEvent 中的 XSS 攻击?

javascript - JavaScript是否有处理选项(可能返回null的东西)的标准方法?

javascript - 在 Marionette 布局中维护一堆 Marionette ItemViews