В jQuery Как бы вы увеличить год на основе месяца, выбранного из выпадающего

Question

У меня есть требование добавить стандартный раскрывающийся список, из которого вы можете выбрать значение даты (месяц / год), и на основе выбранной даты три флажка будут отображены прямо под раскрывающимся списком следующего 3 календарных квартала.

Например Если вы выберете сентябрь 2011 года из выпадающего списка, он будет содержать флажки для 4 квартала 2011 года, первого квартала 2012 года, второго квартала 2012 года. С сентября 2011 года - третий квартал 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>

Это интерпретация 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 и проверить его на основе значений в выпадающем списке. Мысли? * * 1013

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

Обратите внимание, что вы должны использовать attachEvent или .onload / .onchange в Internet Explorer до версии 9 (?) Вместо 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;
    }
};

Поскольку следующие кварталы всегда определены для данного месяца, мы можем жестко закодировать их в функцию 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 демонстрации: с использованием жестко закодированных значений , с использованием вычисления .

Обратите внимание, что это решение не 'Я не использую jQuery.Если вы хотите использовать jQuery, не стесняйтесь изменять код (используйте $() или .on вместо addEventListener(), .append, ...).