提交表单后不会触发更改

时间:2019-01-06 23:38:48

标签: javascript php ajax

我遇到了一个奇怪的问题,我不知道从哪里开始调试

我在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>  

该代码首次生效,问题是当我不想再次更改年份时,我必须手动刷新页面

0 个答案:

没有答案