我正在使用三个下拉列表并使用每个下拉列表的 onclick 函数 ajax 调用。我想当我从下拉列表中选择时，它需要时间来加载数据。所以我想在处理来自 ajax 调用的数据时加载图像。 我试过这个:
<form id="my_form" name="my_form">
<div class="row">
<div class="col-md-6"><h5 class="text-primary">City</h5></div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<!--<input type="text" class="form-control" id="city" placeholder="City" aria-describedby="basic-addon1" name="city" >-->
<select class="form-control" id="tps_city" name="tps_city" placeholder="Please Select City" aria-describedby="basic-addon1" required onChange="fun_city(this.value);">
<option>Select City </option>
<option>Pune</option>
<option>Satara</option>
<option>Sangli</option>
<option>Kolhapur</option>
</select>
</div>
</div>
</div>
<div class="row" >
<div class="col-sm-6"><h5 class="text-primary">Tehshil</h5></div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<select class="form-control" id="tehsil_name" name="tehsil_name" placeholder="Please Select Tehshil" aria-describedby="basic-addon1" required onChange="fun(this.value);">
<option>Select Authority </option>
<?php
?>
</select>
</div>
</div>
</div>
<div class="row" >
<div class="col-sm-6"><h5 class="text-primary"> Wadi</h5></div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<select class="form-control" id="wadi" name="wadi" placeholder="Village/Wadi/Wasti" aria-describedby="basic-addon1" required onchange="drawChart(this.value);">
<option value="">Please Select Wadi</option>
</select>
</div>
</div>
</div>
<br/>
<div id="result"></div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"> <input class="btn btn-primary btn-md" type="submit" value="Save" name="submit" id="submit"></div>
<div class="col-md-6"> <input class="btn btn-primary btn-md" type="reset" value="Refresh" name="Cancel" id="cancel" onClick="window.location.reload(true)"></div>
</div>
</form>
<div id="loading">
<img id="loading-image" src="../data/LoaderIcon.gif" alt="Loading..." />
</div>
我的ajax代码是这样的
<script>
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("<option>Please select Authority</option>");
for (var j in autho_name) {
$('#tehsil_name').append("<option value=\"" + autho_name[j] + "\">" + autho_name[j] + "</option>");
}
}
最佳答案
beforesend 嵌套在 success 中。所以不会在ajax调用前触发，会在ajax调用成功后定义(甚至不会触发)。
代替:
$.ajax({
success: function(msg) {
beforesend: function() {...}
}
})
这样做:
$.ajax({
beforesend: function() {...},
success: function(msg) {...}
})
关于javascript - 在javascript中选择下拉列表时如何显示加载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37725220/