javascript - Jquery - 自动将当年月份添加到下拉列表

标签 javascript jquery date time twitter-bootstrap-3

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

目前,我正在手动添加它们,因为我不太擅长 JavaScript。

如何自动将一年中剩余的当前月份添加到列表中?

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

我做了一个 bootply,所以你可以明白我的意思。

http://www.bootply.com/N2H0BAoapL

最佳答案

下面是我的示例,它帮助我在月份的级联下拉列表中显示当前年份的唯一有效月份或前几年的所有月份

Snapshot of Current Year Versus Previous Year

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

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>

关于javascript - Jquery - 自动将当年月份添加到下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41983334/

相关文章:

javascript - 如何通过类数组对象的键移动值?

java - getEngineByName ("JavaScript"的 ScriptEngine 为空)?

javascript - 我可以使用 jQuery 轻松地向上或向下移动 li 元素吗?

javascript - 使用 jQuery 'draggable' 时,文本在与容器碰撞时出于某种原因换行。为什么?以及如何解决?

jquery - 带有 jQ​​uery 的单选按钮检查

macos - 无法在 mac 上为 csipsimple 配置被子

PostgreSQL 按季节分组(北半球和南半球)

php - 连接整数而不计算 PHP

javascript - 如果有多个元素,如何只保留一个元素

javascript - 匹配每个节点的类名 [javascript]