我遇到了一个奇怪的问题,我不知道从哪里开始调试
我在php页面中有一个带有2个选择框的表单。 第一个始终显示,另一个在更改后显示并填充。
$(document).ready(function() {
$("#year").on("change",function(){
//Getting Value
var selValue = $("#year :selected").val();
$.ajax({
url:'/allsites-monthly/'+selValue,
type: "GET",
dataType: "json",
beforeSend: function(){
$('#loader').css("visibility", "visible");
},
success:function(data) {
$('#month').css("display", "inline");
$('select[name="month"]').empty().append('<option value="0"> Chose month</option>');
$.each(data, function(key, value){
$('select[name="month"]').append('<option value="'+ value + '">'+ value +'</option>');
});
$('#submit').css("display", "inline");
},
complete: function() {
$('#loader').css("visibility", "hidden");
}
});
});
});
该代码有效,但是在我提交表单并刷新页面后,当我尝试更改第一个选择框时没有任何反应。我必须手动刷新页面才能触发on change事件。控制台中未显示任何内容。 提交表单后,我希望能够选择另一年而不必手动刷新页面。 有什么想法我做错了吗?谢谢您的时间!
这是html的示例
<form id="period" class="form-inline" method="get" action="/allsites-monthly/">
<div class="form-group" id="year">
<select name="year" class="form-control">
<option value="0">Chose year</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
</div><!-- /.form-group -->
<div class="form-group" id="month">
<select name="month" class="form-control">
<option value="0">Chose month</option>
</select>
</div><!-- /.form-group -->
<button id="submit" type="submit" class="btn btn-primary btn-sm">Submit</button>
</form>
该代码首次生效,问题是当我不想再次更改年份时,我必须手动刷新页面