如何通過HTML循環選擇<option>點擊值？

在日曆應用程序中，我有一個簡單的選擇，其選項標籤的值爲0-11，相應的月份。我可以在單月（從十二月到一月）周而復始，但我無法以其他方式工作。它只顯示2月和12月。如何通過HTML循環選擇<option>點擊值？

這裏的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); 
});

來源

2013-10-09 se_puede_dev

變化：

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

到：

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

selectedMonth + 1正在進行字符串連接而不是整數加法，因爲selectedMonth是一個字符串。

FIDDLE

我也建議你指定的theMonth寬度 - 這是右箭頭困難點擊，因爲它使移動作爲一個月的變化。

來源

2013-10-09 17:58:57 Barmar

太棒了，就是這樣！謝謝！！ –

雖然 - 我試着將selectedMonth var投射到一個數字，我必須刪除它，所以我不能完美地複製它，像$（'＃MonthName'）.val（Number（selectedMonth + 1））'' - 那會不會做同樣的事情？我敢肯定我的語法錯了！爲什麼我在去一月的時候會工作，而不是在我去十二月的時候？ –

您需要轉換變量，而不是加法結果：'.val（Number（selectedMonth）+1）'。 – Barmar

這是因爲你連接了一個int和一個字符串。

做例如'1' + 1將等於11而不是2。在加入之前，解析您的值：

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

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

來源

2013-10-09 17:59:18

您還需要將'！=='更改爲'！='，因爲類型不同。 – Barmar

請注意，二月和十二月對應於1和11，這樣你就不會添加數值，但連接字符串。

供您參考，這裏有一個問題，可能適合你的問題： How to make an addition instead of a concatenation

作爲一個方面說明，當我參加了小學用我的老師說：

「你不能添加蘋果和梨子。「

那麼，在JavaScript中你可以，因爲它是weakly typed。

來源

2013-10-09 18:03:06 Tilt

如何通過HTML循環選擇<option>點擊值？

回答

相關問題