HTML中选择性点击,如何通过HTML循环选择<option>点击值？

在日历应用程序中，我有一个简单的选择，其选项标签的值为0-11，相应的月份。我可以在单月(从十二月到一月)周而复始，但我无法以其他方式工作。它只显示2月和12月。如何通过HTML循环选择点击值？

这里的a jsfiddle显示我已经做了什么。

这里的HTML：

January

February

March

April

May

◀

Month

▶

这里是jQuery的：

$('.chevron').on('click', function() {

// This if works perfectly, and will reset to 11 once the selectedMonth is 0

if ($(this).hasClass('chevronLeft')) {

var selectedMonth = $('#MonthName').val();

(selectedMonth != 0)

? $('#MonthName').val(selectedMonth - 1).trigger('change')

: $('#MonthName').val(11).trigger('change');

}

else {

// This doesn't work, I tried declaring the variable locally,

// different less/greater than expressions, but nothing works

var selectedMonth = $('#MonthName').val();

(selectedMonth !== 11)

? $('#MonthName').val(selectedMonth + 1).trigger('change')

: $('#MonthName').val(0).trigger('change');

}

});

$('#MonthName').on('change', function() {

var monthText =

$('#MonthName option:selected').text();

$('.theMonth').text(monthText);

});