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

标签 javascript jquery date select

我需要添加一个标准下拉列表,您可以从中选择一个日期值(月/年),并且根据您选择的日期,三个复选框将显示在下一个下拉列表的正下方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 之前附加它们。

现在,当用户更改 monthSelectionyearSelection 中的值时,将调用 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 是我们上面创建的textNodequartalWrapper.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/

相关文章:

java - 插入多行 - java 准备好的语句失败

javascript - 如果 PreventDefault() 仅阻止默认浏览器操作,如何取消自定义事件?

JavaScript Promise then() 排序

javascript - 仅匹配 unicode 字母

javascript - 我的图像无法正常工作

jquery - 打开具有特定日期的日期选择器

javascript - jQuery Validate 没有绑定(bind),没有错误

javascript - 日期格式在 angularjs 中不起作用

arrays - 如何取消嵌套 Postgres 中的日期数组?

r - 如何在处理日期时手动向 ggplot2 添加中断?