我試圖自動將當年的當前月份添加到Bootstrap下拉列表中。jquery - 自動添加當前年份到下拉列表
目前,我手動添加它們,因爲我不擅長JavaScript。
如何自動將當年剩餘的月份添加到列表中?
現在我們在2月份不會添加1月份導致其已經通過。
我做了一個bootply,所以你可以看到我的意思。
http://www.bootply.com/N2H0BAoapL
我試圖自動將當年的當前月份添加到Bootstrap下拉列表中。jquery - 自動添加當前年份到下拉列表
目前,我手動添加它們,因爲我不擅長JavaScript。
如何自動將當年剩餘的月份添加到列表中?
現在我們在2月份不會添加1月份導致其已經通過。
我做了一個bootply,所以你可以看到我的意思。
http://www.bootply.com/N2H0BAoapL
要做到這一點,你可以使用getMonth()
當前日期起一個月。從那裏,你可以遍歷剩下的幾個月和填充select
,是這樣的:
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var month = (new Date()).getMonth();
for (; month < monthNames.length; month++) {
$('select').append('<option>' + monthNames[month] + '</option>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
這個基本邏輯又可以減少到這一點:
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var html = monthNames.slice((new Date()).getMonth()).map(function(month) {
return '<option>' + month + '</option>';
}).join('');
$('select').html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
作爲替代,在Int l對象受支持,月份名稱可從Date.prototype.toLocaleString獲得。這可以採用瀏覽器的默認語言,或者您可以設置它。
請參閱MDN Date.prototype.toLocaleString()和支持矩陣。我不在IE 10或更低版本中工作,但在其他瀏覽器中有很好的支持。
E.g.
function addRemainingMonthOptions(id, lang) {
// Make sure element exists
var sel = document.getElementById(id);
if (!sel) return;
// Get current date, set day to 1 so not affected by adding months
var d = new Date();
d.setDate(1);
// Add options until end of year
do {
month = d.toLocaleString(lang,{localeMatcher: 'best fit', month:'short'})
sel.appendChild(new Option(month, month));
d.setMonth(d.getMonth() +1);
} while (d.getMonth() > 0)
}
// Add remaining months in browser default langauge (lang is undefined)
addRemainingMonthOptions('theMonth0')
// … in Russian
addRemainingMonthOptions('theMonth1', 'ru')
// … in Arabic
addRemainingMonthOptions('theMonth2', 'ar')
<select id="theMonth0">
</select>
<select id="theMonth1">
</select>
<select id="theMonth2">
</select>
下面是我的例子幫助我顯示本年度唯一有效的幾個月或所有月份以前年份月份的級聯下拉。
此例中將禁用級聯月降幅,如果無效的年份被選中,也將照顧的現行有效個月每一年的選擇。
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth();
var cascadedDropDownMonthId = "#dropDownYearMonth";
//Adding Last 10 Years to Year Drop Down
for (var i = currentYear;i > currentYear - 10 ; i--)
{
$("#dropDownYear1").append('<option value="'+ i.toString() +'">' +i.toString() +'</option>');
}
//Disabling Month Dropdown in case of invalid Selections.
$(cascadedDropDownMonthId).prop("disabled", true);
$("#dropDownYear1").change(function() {
var currentSelectedValue = $(this).val();
if (currentSelectedValue == "-1")
{
$(cascadedDropDownMonthId).prop("disabled", true);
}
else
{
$(cascadedDropDownMonthId).prop("disabled", false);
//Get Current Year from Dropdown and Converting to Integer for performing math operations
var currentSelectedYear = parseInt($(this).val());
//As Index of Javascript Month is from 0 to 11 therefore totalMonths are 11 NOT 12
var totalMonths = 11;
if (currentSelectedYear == currentYear) {
totalMonths = currentMonth;
}
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
//Emptying the Month Dropdown to clear our last values
$(cascadedDropDownMonthId).empty();
$(cascadedDropDownMonthId).append('<option value="-1">-Month-</option>');
//Appending Current Valid Months
for (var month = 0; month <= totalMonths; month++) {
$(cascadedDropDownMonthId).append('<option value="'+ (month+1) + '">' + monthNames[month] + '</option>');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDownYear1">
<option value="-1">-Year-</option>
</select>
<select id="dropDownYearMonth">
<option value="-1">-Month-</option>
</select>
感謝羅裏那正是我一直在尋找,謝謝 – user1673498
@Rory什麼是'爲(;?'平均(忽略第一個參數)我只知道它 – plonknimbuzz
@ user1673498沒有問題,很高興幫助 –