Question

我正在尝试将当年的当前月份自动添加到Bootstrap下拉列表中。

目前，我手动添加它们，因为我不擅长JavaScript。

如何自动将当年剩余的当月添加到列表中？

现在我们在二月它不会添加一月，因为它已经过去了。

我做了一个bootply所以你可以看到我的意思。

http://www.bootply.com/N2H0BAoapL

Answer 1

要实现此目的，您可以使用getMonth()从当前日期获取月份。从那里你可以遍历剩下的几个月并填充select，如下所示：

＆＃13;

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>');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

＆＃13;

这个基本逻辑反过来可以简化为：

＆＃13;

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);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

＆＃13;

Answer 2

作为替代方案，在支持Intl对象的情况下，可以从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>

Answer 3

下面是我的示例，它帮助我在级联下拉月中显示 当前年度仅有效月份或前几年所有月份 。

如果选择了无效年份，则下面的示例将禁用级联月份丢弃，并且还将根据年份的选择处理当前有效月份。

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>

Jquery - 自动将当前年份添加到下拉列表中

3 个答案: