There are two selects:

  1. selectMonth
  2. selectDay .

When you click on the first month, I select the month and, in accordance with the selected month, the second column loads the number of days in this month, but the fact is that with the first click the first day does not show for any month, when you click again, help fix it.

function setMonth() { var month = [ "январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь" ]; $.each(month, function(idx, el) { idx++ $("#selectMonth").append("<option value=" + idx + ">" + el + "</option>") }) } function setDays(month) { var date = new Date(2016, month, 0).getDate(); $("#selectDay").find("option").remove(); // setTimeout(function(){},100) for (i = 1; i <= date; i++) { $("#selectDay").append("<option value=" + i + ">" + i + "</option>") console.log(i) } } var cnt = 0; $(document).on("change", "#selectMonth", function() { month = $(this).val(); setDays(month); if (cnt == 0) { //если выбрали месяц единожды удаляем Выберите месяц и Выберите день $("#selectMonth,#selectDay").find("option:eq(0)").remove(); } cnt++ }) setMonth(); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="events"> <select name="" id="selectMonth"> <option>Выберите месяц</option> </select> <select name="" id="selectDay"> <option>Выберите день</option> </select> </div>

JsFiddle example

  • but you yourself delete the first item in each list after adding days to the first change of the month: $("#selectMonth,#selectDay").find("option:eq(0)").remove(); . Get the #selectDay away from here. - Igor

2 answers 2

The problem is that deleting items from the second list occurs in two places.

In the setDays function, all elements are deleted and the necessary ones are added for the selected month.

In the handler function of the change event - the first elements in both lists are deleted during the first trigger.

Thus, to solve, it is sufficient to either transfer the call to setDays after checking

 var cnt = 0; $(document).on("change", "#selectMonth", function() { month = $(this).val(); if (cnt == 0) { //если выбрали месяц единожды удаляем Выберите месяц и Выберите день $("#selectMonth,#selectDay").find("option:eq(0)").remove(); } cnt++ setDays(month); })

Or not to delete the first element in the list of days, since they are already deleted before this in the setDays function

 $("#selectMonth").find("option:eq(0)").remove();

Example

 function setMonth() { var month = [ "январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь" ]; $.each(month, function(idx, el) { idx++ $("#selectMonth").append("<option value=" + idx + ">" + el + "</option>") }) } function setDays(month) { var date = new Date(2016, month, 0).getDate(); $("#selectDay").find("option").remove(); // setTimeout(function(){},100) for (i = 1; i <= date; i++) { $("#selectDay").append("<option value=" + i + ">" + i + "</option>") console.log(i) } } var cnt = 0; $(document).on("change", "#selectMonth", function() { month = $(this).val(); if (cnt == 0) { //если выбрали месяц единожды удаляем Выберите месяц и Выберите день $("#selectMonth,#selectDay").find("option:eq(0)").remove(); } cnt++ setDays(month); }) setMonth(); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="events"> <select name="" id="selectMonth"> <option>Выберите месяц</option> </select> <select name="" id="selectDay"> <option>Выберите день</option> </select> </div>

You can also modify the code a bit using more javascript and jquery features.

 function setMonth() { var months = [ "январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь" ]; months.reduce(function(selectMonth, month, index) { return selectMonth.append($('<option>').val(index + 1).text(month)); }, $("#selectMonth")); } function setDays(month) { var date = new Date(2016, month, 0).getDate(); var selectDay = $("#selectDay"); selectDay.empty(); for (i = 1; i <= date; i++) { selectDay.append($('<option>').val(i).text(i)); } } $(document).on("change", "#selectMonth", function selectMonthHandler() { $("#selectMonth option:first-child").remove(); $(document).off('change', "#selectMonth", selectMonthHandler) .on('change', "#selectMonth", function() { setDays(this.value); }); $(this).change(); }) setMonth(); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="events"> <select name="" id="selectMonth"> <option>Выберите месяц</option> </select> <select name="" id="selectDay"> <option>Выберите день</option> </select> </div>

    minified version with the ability to save the choice of the day when the month changes, if there is no such date in the month, the closest one to the previous choice is selected (the last day of the month)

      function c(a) { return $.map(a, function(a, b) { ++b; return "<option value=" + b + ">" + (a || b) + "</option>" }) } var d = $("#selectMonth"), f = $("option", d), e = $("#selectDay"); d.append(c([ "январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь" ])).on({ change: function() { f.remove(); var a = (new Date(2016, this.value, 0)).getDate(), b = +e[0].value || 1; e[0].options.length = 0; e.append(c(Array(a))) e[0].value = b <= a ? b : a } }) 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="events"> <select name="" id="selectMonth"> <option>Выберите месяц</option> </select> <select name="" id="selectDay"> <option>Выберите день</option> </select> </div>