Quarterly, Half Yearly, Annual Year Based Month Day Drop Down Using jQuery

Working Demo

HTML

Period
<select id="test">
 <option value="0">Select</option>
 <option value="1">Monthly</option>
 <option value="2">Quarterly</option>
 <option value="3">Halferly</option>
 <option value="4">Annualy</option>
</select>
<div id="MonthDayDynamicBlock"></div>

jQuery

$("#test").change(function () {
 CreateMonthDayBlock($(this).val(), "#MonthDayDynamicBlock");
 $(".month").change(function () {
 var Month = $(this).val();
 var divid = $(this).parent("div").attr('id');
 CreateDayDrop("#" + divid, Month, "Day");
 });
});
 
function CreateMonthDayBlock(Period, DivBlock) {
 var MonthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 var TotalSelect;
 var TotalOption;
 var RemoveOption;
 var StartRemoveOption;
 var EndRemoveOption;
 var SelectOptionArray = [];
 var RemoveOptionArray = [];
 var Monthval;
 
$(DivBlock).find("div").remove();
 if (Period == 1) {
 $(DivBlock).append("<div id='MonthDayBlock' class='MonthDayEachBlock divblock paddingbotomfivepx'></div>");
 CreateDayDrop("#MonthDayBlock", 0, "Day");
 }
 if (Period == 2) {
 TotalSelect = 4;
 }
 if (Period == 3) {
 TotalSelect = 2;
 }
 if (Period == 4) {
 TotalSelect = 1;
 }
 TotalOption = (MonthNames.length / TotalSelect);
 RemoveOption = MonthNames.length - TotalOption;
 
if (Period > 1) {
 for (var i = 1; i <= TotalSelect; i++) {
 $(DivBlock).append("<div id='MonthDayBlock" + i + "' class='MonthDayEachBlock divblock paddingbotomfivepx'></div>");
 CreateMonthBlock("#MonthDayBlock" + i, MonthNames, "Month");
 EndRemoveOption = i * TotalOption;
 StartRemoveOption = (EndRemoveOption - TotalOption) + 1;
 
SelectOptionArray = [];
 for (var j = StartRemoveOption; j <= EndRemoveOption; j++) {
 SelectOptionArray.push(j);
 }
 RemoveOptionArray = [];
 $.each(MonthNames, function (ikey, val) {
 if ($.inArray(ikey + 1, SelectOptionArray) < 0) RemoveOptionArray.push(ikey + 1);
 });
 
$.each(RemoveOptionArray, function (indexa, valuea) {
 $("#MonthDayBlock" + i + " select.month option[value=" + valuea + "]").remove();
 
});
 
CreateDayDrop("#MonthDayBlock" + i, SelectOptionArray[0], "Day");
 }
 }
 
}
 
function CreateMonthBlock(MonthDayBlock, MonthNames, Text) {
 var month_select = $("<select class='month floatleft'></select>");
 $.each(MonthNames, function (index, value) {
 var keynum = index + 1;
 month_select.append($('<option></option>').val(keynum).html(value));
 });
 $(MonthDayBlock).append(month_select);
 $(MonthDayBlock).find(".monthtext").remove();
 $(MonthDayBlock).find(".month").before("<div class='monthtext floatleft paddingsidefivepx'>" + Text + "</div>");
 
}
 
function CreateDayDrop(MonthDayBlock, Month, Text) {
 if (Month != 0 || Month != "") {
 $(MonthDayBlock).find(".day").remove();
 var dd = new Date(2012, Month, 0);
 var lastday = dd.getDate();
 var day_select = $("<select class='day floatleft'></select>");
 for (var i = 1; i <= lastday; i++) {
 day_select.append($('<option></option>').val(i).html(i));
 }
 $(MonthDayBlock).find(".month").after(day_select);
 $(MonthDayBlock).find(".daytext").remove();
 $(MonthDayBlock).find(".day").before("<div class='daytext floatleft paddingsidefivepx'>" + Text + "</div>");
 } else {
 $(MonthDayBlock).find(".day").remove();
 var day_select = $("<select class='day floatleft'></select>");
 for (var i = 1; i <= 31; i++) {
 day_select.append($('<option></option>').val(i).html(i))
 }
 $(MonthDayBlock).append(day_select);
 $(MonthDayBlock).find(".daytext").remove();
 $(MonthDayBlock).find(".day").before("<div class='daytext floatleft paddingsidefivepx'>" + Text + "</div>");
 }
}

CSS

.MonthDayEachBlock {
 width:100%;
 float:left;
}
.monthtext, .daytext, .month, .day {
 float:left;
}
.monthtext, .daytext {
 padding:0 5px;
}
select.month {
 width:100px;
}

Working Demo