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

Question

我有一个javascript函数，可以动态更新如下所示的空选择列表，而该函数正在运行时，我正在显示加载图像以通知用户。 当前，此加载图像在select之外的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的上/左/下/右值（需要一个水平和一个垂直）。您设置为相对。

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

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

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