title: how to show loading image when select the drop down list in javascript
body: <p>I am using three drop down list and use each drop down list onclick function ajax call. I want when I select from drop down it requires time to load data. So I want to load image while processing data from ajax call.
  I have tried this:</p>
  
  <pre><code>      &lt;form id="my_form" name="my_form"&gt;
   &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;&lt;h5 class="text-primary"&gt;City&lt;/h5&gt;&lt;/div&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon" id="basic-addon1"&gt;#&lt;/span&gt;
                          &lt;!--&lt;input type="text" class="form-control" id="city" placeholder="City" aria-describedby="basic-addon1" name="city"  &gt;--&gt;
                          &lt;select class="form-control" id="tps_city" name="tps_city" placeholder="Please Select City" aria-describedby="basic-addon1" required onChange="fun_city(this.value);"&gt;
                              &lt;option&gt;Select City &lt;/option&gt;
                              &lt;option&gt;Pune&lt;/option&gt;
                              &lt;option&gt;Satara&lt;/option&gt;
                              &lt;option&gt;Sangli&lt;/option&gt;
                              &lt;option&gt;Kolhapur&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row" &gt;
                  &lt;div class="col-sm-6"&gt;&lt;h5 class="text-primary"&gt;Tehshil&lt;/h5&gt;&lt;/div&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon" id="basic-addon1"&gt;#&lt;/span&gt;
                          &lt;select class="form-control" id="tehsil_name" name="tehsil_name" placeholder="Please Select Tehshil" aria-describedby="basic-addon1"  required onChange="fun(this.value);"&gt;
                              &lt;option&gt;Select Authority &lt;/option&gt;
                              &lt;?php
  
                              ?&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row" &gt;
                  &lt;div class="col-sm-6"&gt;&lt;h5 class="text-primary"&gt; Wadi&lt;/h5&gt;&lt;/div&gt;
                  &lt;div class="col-sm-6"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon" id="basic-addon1"&gt;#&lt;/span&gt;
                          &lt;select class="form-control" id="wadi" name="wadi" placeholder="Village/Wadi/Wasti" aria-describedby="basic-addon1"  required onchange="drawChart(this.value);"&gt;
                              &lt;option value=""&gt;Please Select Wadi&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br/&gt;
              &lt;div id="result"&gt;&lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-md-3"&gt;&lt;/div&gt;
                  &lt;div class="col-md-3"&gt; &lt;input class="btn btn-primary btn-md" type="submit" value="Save" name="submit" id="submit"&gt;&lt;/div&gt;
                  &lt;div class="col-md-6"&gt; &lt;input class="btn btn-primary btn-md" type="reset" value="Refresh" name="Cancel" id="cancel" onClick="window.location.reload(true)"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/form&gt;
              &lt;div id="loading"&gt;
                              &lt;img id="loading-image" src="../data/LoaderIcon.gif" alt="Loading..." /&gt;
                          &lt;/div&gt;  
  </code></pre>
  
  <p>My ajax code like this</p>
  
  <pre><code>  &lt;script&gt;
    function fun_city(val) {
      // alert(val);
      $.ajax({
        type: "POST",
        data: 'city_name=' + val,
        url: "authority_detail.php",
  
           beforesend: function() {
  
            $('#loading').hide();
  
          },
        success: function(msg) {
  
  
          // alert(msg);
          var name1 = JSON.parse(msg);
          var autho_name = new Array();
          var i = 0;
          for (var key in name1) {
            if (name1.hasOwnProperty(key)) {
              autho_name[i] = name1[key]["tps_authority"];
              i++;
            }
          }
          // alert(tehsil_name);
          $('#tehsil_name').append("&lt;option&gt;Please select Authority&lt;/option&gt;");
          for (var j in autho_name) {
  
            $('#tehsil_name').append("&lt;option value=\"" + autho_name[j] + "\"&gt;" + autho_name[j] + "&lt;/option&gt;");
  
          }
        }
  </code></pre>