Question

我有多个下拉列表。随后的下拉列表会根据前面的下拉列表更改而更改。我想加载一个loading.gif图像并禁用所有其他前面的下拉列表，直到ajax加载完成。 jquery ajax的新功能因此无法理解与我的问题匹配的许多答案。任何帮助表示赞赏。

<script type="text/javascript">
    $(document).ready(function(){
        $('#zone').change(function(){
            var x=$('#zone').val();
            $.ajax({
                    type:'POST', url:"<?php echo site_url().'dealer/getDistrict';?>", data:'valuezone='+x, success:function(data){
                    $('#district').html(data);      
                    }           
                });
            });
        $('#district').change(function(){
            var y=$('#district').val();
            //alert(y)
            $.ajax({
                    type:'POST', url:"<?php echo site_url().'dealer/getTown';?>", data:'valuedistrict='+y, success:function(data){
                    $('#town').html(data);

                    }           
                });
            });
        $('#town').change(function(){
            var z=$('#town').val();
            //alert(z)
            $.ajax({
                    type:'POST', url:"<?php echo site_url().'dealer/getLoca';?>", data:'valuetowns='+z, success:function(data){
                    $('#loca').html(data);  
                    }           
                });
            });
        $('#loca').change(function(){
                var y=$('#loca').val();
                //alert(y)
                $.ajax({
                        type:'POST', url:"<?php echo site_url().'dealer/getDealer';?>", data:'valuetown='+y+', '+$('#town').val()+', '+$('#district').val(), success:function(data){
                        $('#result').html(data);

                        }           
                    });
                });

        });
    </script>

Answer 1

您可以像这样设置加载gif

 $('#zone').change(function(){
           $('loader').show(); //MAKE ANY OTHER THING VISISBLE

            var x=$('#zone').val();
            $.ajax({
                    type:'POST', 
                     url:"<?php echo site_url().'dealer/getDistrict';?>",                     
                    data:'valuezone='+x, 
                 success:function(data){
                                        $('loader').hide(); // SET THEM HIDDEN
                                        $('#district').html(data);      
                    }           
                });
            });

select元素具有禁用属性你禁用所有这样的选择元素

$('select').attr('disabled','true');

并使用

启用它们

$('select').removeAttr('disabled');

Answer 2

如果您在下拉列表的onchange调用AJAX函数来填充子下拉列表。在这种情况下，您可以在onchange上添加一个JavaSript函数，该函数首先显示加载器映像，然后调用AJAX函数以通过deyaing 1秒填充子下拉列表，以便页面在AJAX调用开始之前加载加载器映像。

<td>
    <select name="company" id="company" 
            style="width:350px; height:145px;" 
            multiple="multiple"  
            Onchange="fnDelay('company','val1','val2');" >
    </select>
</td>

在JavaScript函数中，使AJAX调用延迟1秒以显示加载程序映像

function fnDelay(element, val1, val2) {
    $('##divLoading').show();
    // set time out by 2 second so that AJAX call gets delayed by 2 second.              
    // It gives time for loader image to get dispalyed.
    setTimeout(function() {
        fnSetChildDropDownValues(parentEle, val1, val2);
    }, 2000);
}

在HTML端，在div中定义加载器，如下所示。它还可以防止用户在加载时执行任何操作。

<div style="display:block;position:relative;">
    <form>
        Add HTML for dependentdropdowns....

        <div id="divLoading" style="background-color:##efefef; top:0px; left:0px; width:100%; height:100%; display:none; position:absolute; text-align:center; valign:middle; opacity:0.8; filter:alpha(opacity=80);">
            <br>
            <h1>Retrieving Data</h1><br>
            <img src="images/loading.gif" alt="" border="0">
        </div>
    </form>
</div>

处理完AJAX函数并填充子下拉列表后隐藏加载程序。

function fnSetChildDropDownValues(parentEle, attrVal1, attrVal2){

    //Add Logic that makes the ajax call and populates drop down
    .......
    .......
    $('##divLoading').hide();

    enter code here

}

Answer 3

您可以使用jquery ajax全局回调

加载器

$(document).ajaxStart(function() {
  $("#loader").show();
});

$(document).ajaxStop(function() {
  $("#loader").hide();
});

加载loading.gif图像并禁用所有后续下拉列表，直到ajax加载完成

3 个答案: