每月的天數不顯示首次加載模式引導程序的時間

Question

在我的引導模態上。 選擇月份時，我可以選擇每個月的天數。

問題：當我第一次加載引導程序模態時，該月的日期不會立即顯示。 我必須選擇另一個月份，然后重新選擇要獲得日子的月份。

問題：當模態打開時，如何才能顯示要顯示的所選月份的月份，而不是我必須先選擇另一個月份然后返回。

示例代碼預覽： 單擊此處 鏈接現在已使用工作腳本更新。

代碼HTML

<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="page-header">
        <h3 class="page-title">Bootstrap Pop Up Modal Date Select</h3>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <select name="year" class="form-control">
                  <option>2015</option>
                  <option>2016</option>
                  <option>2017</option>
                  <option>2018</option>
                </select>
              </div>
              <div class="form-group">
                <select name="month" class="form-control">
                  <option value="1">Jan</option>
                  <option value="2">Feb</option>
                  <option value="3">Mar</option>
                  <option value="4">Apr</option>
                  <option value="5">May</option>
                  <option value="6">Jun</option>
                  <option value="7">Jul</option>
                  <option value="8">Aug</option>
                  <option value="9">Sept</option>
                  <option value="10">Oct</option>
                  <option value="11">Nov</option>
                  <option value="12">Dec</option>
                </select>
              </div>
              <div class="form-group">
                <select name="day" class="form-control">

                </select>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

代碼JavaScript

$('select[name="month"]').on("change", function() {
  var year = $('select[name="year"]').val();
  if (year > 0) {
    $('select[name="day"]').find("option").remove();
    var daysInMonth = new Date(year, $(this).val(), 0).getDate();
    for (var i = 1; i <= daysInMonth; i++) {
      console.log(i);
      $('select[name="day"]').append($("<option></option>").attr("value", i).text(i));
    }

  }
});

Answer 1

在事件初始化后強制事件更改：

$('select[name="month"]').on("change", function() {
  var year = $('select[name="year"]').val();
  if (year > 0) {
    $('select[name="day"]').find("option").remove();
    var daysInMonth = new Date(year, $(this).val(), 0).getDate();
    for (var i = 1; i <= daysInMonth; i++) {
      console.log(i);
      $('select[name="day"]').append($("<option></option>").attr("value", i).text(i));
    }

  }
});
$('select[name="month"]').trigger('change');

示例： https ： //jsfiddle.net/xhqj9trd/