具有“请稍候"标签的Ajax组合框用于加载数据 [英] Ajax Combo box with `Please Wait` label For Loading Data
本文介绍了具有“请稍候"标签的Ajax组合框用于加载数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在组合框下方如何为Please wait..或Loding...标签?
How Can I Have a Please wait.. or Loding... label For Loding Data Time below of my Combo box?
我想要，当在男性和女性之间切换时，请参阅切换"框下的Loading...
I Want, When Switch Between Male And Female, see Loading... under Switch box
HTML
<body>
<form>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
</form> <br>
<div id="txtHint"><b>Person info will be listed here.</b>
</div>
</body>
javascript看起来像这样
The javascript will look like this
$(document).ready(function() {
$('#users').on('change', function() {
$('#for-male, #for-female').hide()
var value = $(this).val()
if(value == "1") {
$('#for-male').show();
} else {
$('#for-female').show();
}
});
});
css将是
#for-male, #for-female{
display:none;
}
推荐答案
$(document).ready(function() {
//save actual text
var text = $('#test').html();
$('#users').on('change', function() {
$('#for-male, #for-female').hide()
var value = $(this).val()
if (value == "1") {
$('#for-male').show();
} else {
$('#for-female').show();
}
//change text to loading
$('#test').html('Loading...');
//this is demo code for testing, here you will call your ajax function
setTimeout(function(){
//change back to orignal text
$('#test').html(text);
}, 1000);
});
});
#for-male, #for-female{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
<br>
<div id="txtHint"><b id="test">Person info will be listed here.</b>
</div>
这篇关于具有“请稍候"标签的Ajax组合框用于加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
