javascript - 首次加载模态 Bootstrap 时不显示月份中的天数

Question

在我的 Bootstrap 模式上。我可以在选择月份时选择每个月的日期。

问题:当我第一次加载 Bootstrap 模式时，该月的天数不会立即显示。我必须选择另一个月份，然后重新选择月份才能获得天数。

问题:我如何才能显示模式打开时出现的所选月份的日期，而不是我必须先选择另一个月份然后返回。

示例代码预览:Click Here 链接现已使用工作脚本更新。

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/