Question

在我的引导模态上。选择一个月时，我可以选择每个月的日子。

问题：当我第一次加载引导模式时，那个月的日子不会立即显示。我必须选择另一个月重新选择我想要的月份。

问题：我怎样才能显示当模态打开时出现的所选月份的日期，而不是我必须先选择另一个月然后再返回。

示例代码预览：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

在事件init之后强制更改事件：

var observable = Rx.Observable.interval(100);

var subscription = observable.subscribe(function(value) {
   console.log(value);
});

setTimeout(function() {
  subscription.dispose();           
}, 1000)

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

第一次加载模态引导时未显示的月份

1 个答案: