CODEWITHSUNDEEP
javascripthtml
user1471980
user1471980

Reputation: 10626

how do you show the loading image inside the select box in javascript

I have a javascript functions that dynamically updates an empty select list as below, while the function is running I am showing loading image to inform the users. This loading image currently runs in a div outside fo the select. Is there a way I can show this loading image inside the select box?

<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>

Upvotes: 0

Views: 1147

Answers (1)

pwdst
pwdst

Reputation: 13735

Use absolute positioning and z-index to place the loading div on top of the select element.

If your page is complicated set a container for the select list to have "position: relative" and then set an absolute position for the loading div to appropriate values to place the loading div in the same location as the select list. Set a z-index on the loading div to a positive number greater than the select list and its container.

If your design is not fixed then you may need to calculate the top/left/bottom/right values (you will need one horizontal and one vertical) using JavaScript by using offset values of the select list from either the page or the parent whose position you set to relative.

Set the position using JavaScript and use this to toggle the "display" property of the loading div - this can be done either using jQuery or by using element.style.

It is also possible to create an entire page "overlay" effect by creating an absolutely positioned element directly within the page body with 100% height, 100% width and top 0, left 0, bottom 100%, right 100%. This could be semi-transparent by setting an rgba background colour with an alpha/a value of less than 1, or setting an opacity value on the element.

Without using a third-party component, it is not valid HTML to add anything other than an option element inside a select element. Third party components fake this by using div or other elements to create a visual representation of a select menu, often using a hidden real select element to submit the values to the server.

Upvotes: 2

Related Questions