Question

我有一个动态更新空选择列表的javascript函数，如下所示，当函数正在运行时我正在显示加载图像以通知用户。此加载图像当前在选择之外的div中运行。有没有办法在选择框中显示这个加载图像？

<script>
   function update_select(){
     $('#loading').html('<img src="img/loading.gif"> loading...cluster selection list ... wait!');

     var $select = $('#h_name');
    $(jsonData).each(function (index, o) {    
    var $option = $("<option/>").attr("value", o.desc).text(o.desc);
    $select.append($option);

});

//after the function completes, I remove the loading image 
$('#loading').html('');

}
</script>

HTML：

<div id="loading"></div>
<select id="h_name"></select>

Answer 1

使用绝对定位和z-index将加载div放在select元素的顶部。

如果您的页面很复杂，请为选择列表设置一个容器，使其具有“position：relative”，然后将加载div的绝对位置设置为适当的值，以将加载div放在与选择列表相同的位置。将加载div上的z-index设置为大于选择列表及其容器的正数。

如果您的设计没有修复，那么您可能需要使用JavaScript计算顶部/左侧/底部/右侧值（您将需要一个水平和一个垂直），方法是使用页面中的选择列表的偏移值或父母的职位设置为亲戚。

使用JavaScript设置位置并使用它来切换加载div的“display”属性 - 这可以使用jQuery或使用element.style来完成。

还可以通过在页面主体内直接创建绝对定位元素来创建整个页面“叠加”效果，其中100％高度，100％宽度和顶部0，左0，底部100％，右100％。通过设置alpha / a值小于1的rgba背景颜色或在元素上设置不透明度值，可以实现半透明。

如果不使用第三方组件，则在select元素中添加选项元素以外的任何内容都无效。第三方组件通过使用 div 或其他元素来伪造这一点，以创建选择菜单的可视化表示，通常使用隐藏的真实选择元素将值提交给服务器。

如何在javascript中的选择框中显示加载图像

1 个答案: