0

我有多个下拉菜单。随后的下拉列表将根据刚刚之前的下拉列表更改进行更改。我想加载一个 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>
4

3 回答 3

2

您可以像这样设置加载 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 元素有一个 disabled 属性，您可以像这样禁用所有 select 元素

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

并让他们使用

$('select').removeAttr('disabled');
于 2013-08-07T07:01:08.163 回答
1

如果您在下拉列表中调用 AJAX 函数onchange来填充子下拉列表。在这种情况下，您可以添加一个 JavaSript 函数，在onchange该函数上首先显示加载器图像，然后调用 AJAX 函数通过延迟 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

}
于 2017-02-02T11:19:02.710 回答
0

您可以将 jquery ajax 全局回调用于加载程序

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

$(document).ajaxStop(function() {
  $("#loader").hide();
});
于 2013-08-07T07:10:31.497 回答