如何在单击?</option>上循环选择HTML select <option>值

时间:2013-10-09 17:53:06

标签: javascript jquery html

在日历应用中,我有一个简单的选择,其中包含相应月份的值为0-11的选项标记。我可以单独循环几个月(从12月到1月),但我不能让它以另一种方式工作。它只显示2月和12月。

以下a jsfiddle显示了我已经完成的工作。

这是HTML:

<select id="MonthName" class="form-control">
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <!-- etc, through 11 -->
</select>

<!-- 'Buttons' -->
<span class="chevron chevronLeft floatLeft">◀</span>
<span class="theMonth">Month</span>
<span class="chevron chevronRight floatRight">▶</span>

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

3 个答案:

答案 0 :(得分:2)

变化:

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

为:

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

selectedMonth + 1正在进行字符串连接而不是整数加法,因为selectedMonth是一个字符串。

FIDDLE

我还建议您指定theMonth的宽度 - 点击右箭头很困难,因为它随着月份的变化而不断移动。

答案 1 :(得分:0)

那是因为你将一个int连接到一个字符串。

举例来说,'1' + 1将等于11,而不是2。在添加之前解析您的值:

$('#MonthName').val(parseInt(selectedMonth) + 1)

小提琴:http://jsfiddle.net/mtJRn/21/

答案 2 :(得分:0)

请注意,2月和12月对应于1和11,因此您不是要添加数值而是连接字符串。

供您参考,这里有一个问题可能适合您的问题: How to make an addition instead of a concatenation

作为附注,当我上小学时,我的老师常常说:

  

“你不能添加苹果和梨。”

好吧,在javascript中你可以,因为它是weakly typed

相关问题