jQueryでドロップダウンリストから選択した月に基づいて年を増やす方法

Question

日付の値（月/年）を選択できる標準ドロップダウンを追加する必要があり、選択した日付に基づいて、次の3カレンダー四半期のドロップダウンのすぐ下に3つのチェックボックスが表示されます。

例：ドロップダウンから2011年9月を選択する場合は、2011年第4四半期、2012年第1四半期、第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); 
}); 

してくださいaddEventListenerではなく、バージョン9（？）より前のInternet ExplorerでattachEventまたは.onload/.onchangeを使用する必要があることに注意してください。スクリプトの始めに要素を作成して埋め込むこともできますが、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); 
    } 

次に、3つの子ラベルとチェックボックスをすべて更新します。 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にそれらをハードコーディングすることができます。最初の値は四半期であり、第二の1のオフセット年であることを

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を使用してコードを自由に変更したい場合はaddEventListener()の代わりに$()または.on、.append ...のように使用してください。