ajax - loading.gif 画像を読み込み、ajax の読み込みが完了するまで、後続のすべてのドロップダウンを無効にします

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>