title: Load a loading.gif image and disable all succeeding dropdowns until ajax load is complete
body: <p>I have multiple dropdowns. The succeeding dropdowns are changed according to the just preceeding dropdown change. I want to load a loading.gif image and disable all other preceeding dropdowns till the ajax load is complete. New to jquery ajax so couldn't understand  many answers matching my question. Any help appreciated.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $('#zone').change(function(){
              var x=$('#zone').val();
              $.ajax({
                      type:'POST', url:"&lt;?php echo site_url().'dealer/getDistrict';?&gt;", data:'valuezone='+x, success:function(data){
                      $('#district').html(data);      
                      }           
                  });
              });
          $('#district').change(function(){
              var y=$('#district').val();
              //alert(y)
              $.ajax({
                      type:'POST', url:"&lt;?php echo site_url().'dealer/getTown';?&gt;", data:'valuedistrict='+y, success:function(data){
                      $('#town').html(data);
  
                      }           
                  });
              });
          $('#town').change(function(){
              var z=$('#town').val();
              //alert(z)
              $.ajax({
                      type:'POST', url:"&lt;?php echo site_url().'dealer/getLoca';?&gt;", data:'valuetowns='+z, success:function(data){
                      $('#loca').html(data);  
                      }           
                  });
              });
          $('#loca').change(function(){
                  var y=$('#loca').val();
                  //alert(y)
                  $.ajax({
                          type:'POST', url:"&lt;?php echo site_url().'dealer/getDealer';?&gt;", data:'valuetown='+y+', '+$('#town').val()+', '+$('#district').val(), success:function(data){
                          $('#result').html(data);
  
                          }           
                      });
                  });
  
          });
      &lt;/script&gt;
  </code></pre>