在选择更改时显示/隐藏微调器 [英] Show/hide spinner on select change
本文介绍了在选择更改时显示/隐藏微调器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 LoadAwesome ,我想知道如何显示Spinner div我在加载数据之前更改选择值. 当前,我正在使用AJAX请求来加载数据.
I'm using LoadAwesome and I want to know how can I show spinner div when I change select value before load the data. Currently I'm using AJAX requests to load the data.
简单说明:选定的更改->显示微调框->加载数据
Simple explanation: selected change -> show spinner -> load data
我已经尝试这样做,但是加载数据时没有旋转效果. :(
I'll already try to do this, but data is loaded without the spinner effect. :(
<select id="select_data">
<option value="">Choose one..</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<div class="content">
<div id="spinner">
<div style="color: #79bbb5" class="la-ball-spin-fade la-2x">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<br>
<div id="text"></div>
</div>
$("#select_data").change(function() {
// I want to show the spinner when I change select value before load the data -->
// So before show this, I'll show the spinner and then, the text.
$("#text").html(($("#select_data option:selected").text()));
});
https://jsfiddle.net/0e6rtog5 -Unfortunatel jsfiddle没有显示微调器.
https://jsfiddle.net/0e6rtog5 - Unfortunatel jsfiddle doesn't show the spinner.
推荐答案
使用此:
显示更改:
$('.la-ball-spin-fade').hide();//hide by default -can use css
$("#select_data").change(function({
$('.la-ball-spin-fade').show();
//trigger ajax
});
在ajax成功隐藏它:
hide it at ajax success:
...
success:function(data) {
//other data manipulation;
$('.la-ball-spin-fade').hide();
}
https://jsfiddle.net/mgp699za/1/
这篇关于在选择更改时显示/隐藏微调器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文