[英]Days of month not showing when first load modal bootstrap
在我的引导模态上。 选择月份时,我可以选择每个月的天数。
问题:当我第一次加载引导程序模态时,该月的日期不会立即显示。 我必须选择另一个月份,然后重新选择要获得日子的月份。
问题:当模态打开时,如何才能显示要显示的所选月份的月份,而不是我必须先选择另一个月份然后返回。
示例代码预览: 单击此处 链接现在已使用工作脚本更新。
代码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">×</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));
}
}
});
在事件初始化后强制事件更改:
$('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');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.