Show "Loading ..." in the drop-down list

Question

I am running a database query to load dropdownbox using jquery. Is there a way to display the words "Loading ..." in the drop-down list during query execution?

Thanks.

Answer 1

You can add a temporary item to the drop-down list when starting ajax:

$('#myDropDown').prepend($('<option></option>').html('Loading...'));

Answer 2

Call your drop down 'userChoice', you can write code like

$(document).ready(
    function()
    {

        //Before calling your ajax method, clear the select drop down.
        //and add a loading option.
        $('#userChoice')
            .children()
            .remove()
            .end()
            .append('<option value="">Loading...</option>');

        $.ajax(

                    //Load the userChoice as usual in success handler of your ajax call. 
                    success : function() { //Load #userChoice } 
              );


    }
);

Answer 3

, HTML , jQuery.

<select>
  <option>Loading...</option>
</select>

, option .

Answer 4

If you execute the request through an AJAX call, you can use something like the following to clear the dropdown list first and insert the downloadable message (on the client side of Javascript):

var lb = document.getElementById ("myDropdownList");
lb.options.length = 0;
var newOpt = new Option("Loading...", "");
lb.options[0] = newOpt;
// Your jquery call here
...

Answer 5

add this before ajax post

$('#myDropDown').empty();
$('#myDropDown').append($('<option></option>').html('Loading...'));

then again with the successful dynamic addition of the dropdown menu

$('#myDropDown').empty();
$('#myDropDown').append($('<option></option>').val("").html("Select"));
for (var i = 0; i < array.length; i++) {
                $('#myDropDown').append($('<option></option>').val(array[i].selectedvalue).html(array[i].selectedtext));
            }