在jQuery中如何根據從下拉列表中選擇的月份增加年份

Question

我有一個要求，添加一個標準下拉列表，您可以從中選擇日期值（月/年）並根據您選擇的日期，接下來的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> 

這是我朋友的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，並檢查它基於選擇下拉列表中的值。思考？

Answer 1

首先，我們必須準備一些元素。既然你不想每年都保存，最好是動態創建的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或yearSelectionupdateQuartals變化值被稱爲：

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，...）。