jquery 选择更改时显示/隐藏微调器

hrirmatl 于 2023-03-17 发布在 jQuery

关注(0)|答案(2)|浏览(126)

我正在使用LoadAwesome，我想知道在加载数据之前更改select值时如何显示spinner div。目前我正在使用 AJAX 请求加载数据。

**简单说明：**所选更改-〉显示微调器-〉加载数据

我已经尝试过这样做了，但是加载数据时没有微调效果。：（

<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-不幸的是jsfiddle没有显示微调器。

jquery

来源：https://stackoverflow.com/questions/36054846/show-hide-spinner-on-select-change

2条答案

按热度按时间

bqucvtff1#

这将给予你的要点是什么可以做加载微调选择变化

$("#select_data").on('change', function() {
  // show spinner here
  $('#spinner').show(); // or do addClass('spinner')

  $.ajax({
    url: "test.html"
  }).done(function() {
    // hide again on response of ajax
    $('#spinner').hide(); // or remove class removeClass('spinner')
  });
});

DEMO
也请添加LoadAwesome模块的url，以便我们更容易

赞(0）回复(0）举报 2023-03-17

ntjbwcob2#

使用此命令：
更改时显示：

$('.la-ball-spin-fade').hide();//hide by default  -can use css
    $("#select_data").change(function({     
    $('.la-ball-spin-fade').show();
        //trigger ajax
    });

隐藏它 AJAX 成功：

...
success:function(data) {
//other data manipulation;
 $('.la-ball-spin-fade').hide();
}

https://jsfiddle.net/mgp699za/1/

赞(0）回复(0）举报 2023-03-17

我来回答

jquery 选择更改时显示/隐藏微调器

2条答案

相关问题

热门标签

最新问答