Recently, I've been dabbling in jQuery and decided to create two list boxes using it. One box contains dates while the other contains months. It's quite handy since I need them in different sections of my HTML page. However, when attempting to encapsulate this functionality within a function, things didn't go as planned. Here is the link to the code on JSFiddle
<div class="drop">
<div style="float:left;">Date of Birth : </div>
<div class="current"><input type="text" name="Mem_DOB" class="memdate1"/></div>
<div class="alldate1"></div> <div class="allmonth1"></div>
</div>
<div class="drop">
<div style="float:left;">Wedding Anniversery : </div>
<div class="current"><input type="text" name="Mem_WAnn" class="memdate2"/></div>
<div class="alldate2"></div> <div class="allmonth2"></div>
</div>
$(document).ready(function () {
$('.memdate1').click(function () {
var date = $('.alldate1').attr('id');
alert(date);
var month = $('allmonth1').attr('id');
GenerateCalendar(date, month);
});
$('.memdate2').click(function () {
var date = $('.alldate1').attr('id');
alert(date);
var month = $('allmonth2').attr('id');
GenerateCalendar(date, month);
});
function GenerateCalendar(date,month) {
var arr = []
for (var i = 1; i < 32; i++) {
arr.push({ val: i, text: i })
}
var sel = $('<select>');
$(arr).each(function () {
sel.append($("<option>").attr('value', this.val)
.text(this.text));
});
$('.div'+ date).html(sel);
$('.div'+ date).show();
//month list
var arr = [
{ val: 'January', text: 'January' },
{ val: 'February', text: 'February' },
{ val: 'March', text: 'March' },
{ val: 'April', text: 'April' },
{ val: 'May', text: 'May' },
{ val: 'June', text: 'June' },
{ val: 'July', text: 'July' },
{ val: 'August', text: 'August' },
{ val: 'September', text: 'September' },
{ val: 'October', text: 'October' },
{ val: 'November', text: 'November' },
{ val: 'December', text: 'December' },
];
var sel = $('<select>');
$(arr).each(function () {
sel.append($("<option>").attr('value', this.val)
.text(this.text));
});
$('.div' + month).html(sel);
$('.div' + month).show();
//$('.memdate').hide();$("div#" + name).
}
});