jQuery по умолчанию Выбранный год и месяц при загрузке

Question

Я пытаюсь автоматически выбрать текущий месяц и год при загрузке страницы с текущей проверкой, т.е. в текущем выбранном году в поле выбора месяца будут отображаться только текущий месяц и прошедший месяц.

Я попробовал функцию .load (), но прослушиватель событий не работает при загрузке страницы.

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">

</select>
<select id="dropDownYearMonth">
    
</select>

Answer 1

Вы можете просто использовать функцию document ready для загрузки текущих months и years.

Вам нужно обернуть вас current year months в функцию и вызвать эту функцию на DOM готово.

В этой функции loadMonths нам нужно передать current month, а затем проверить длину названий месяцев и добавить только месяц пополнения из current года.

В вашем onchange функция, мы можем просто проверить, соответствует ли selected год current году, и после этого мы можем вызвать функцию loadMonths(), которая покажет текущий год, оставшийся months только ИЛИ иначе, если год не current, тогда все месяцы будут быть appended до раскрывающегося списка месяцев.

Изменить: Текущий месяц по умолчанию будет отображаться при загрузке так, как вы хотели.

Демо:

var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth();
var cascadedDropDownMonthId = "#dropDownYearMonth";
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

//Adding current months on load
function loadMonths(curr) {
  //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>');
  }
  //Months
  for (i = 0; i <= curr; i++) {
    $(cascadedDropDownMonthId).append('<option selected value="' + (i + 1) + '">' + monthNames[i] + '</option>');
  }
}

//on change function
$('#dropDownYear1').on('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;

    //Emptying the Month Dropdown to clear our last values
    $(cascadedDropDownMonthId).empty();

    // $(cascadedDropDownMonthId).append('<option value="-1">-Month-</option>');                                
    //Appending Current Valid Months
    if (currentSelectedYear == currentYear) {
      //Calling current month if year is current
      loadMonths(currentMonth)
      //total month
      totalMonths = currentMonth;
    } else {
      //If not current year load all months
      for (var month = 0; month <= totalMonths; month++) {
        $(cascadedDropDownMonthId).append('<option value="' + (month + 1) + '">' + monthNames[month] + '</option>');
      }
    }
  }
})

// execute the function when the page loads
$(document).ready(loadMonths(currentMonth));

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

<select id="dropDownYear1">

</select>
<select id="dropDownYearMonth">

</select>