Show "Loading..." in dropdown box

Question

I'm running a database query to load a dropdownbox using jquery. Is there a way to display the words "Loading..." in the dropdownbox while the query is running?

Thanks.

Answer 1

You can add temporary item to your dropdown list while the ajax is running:

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

Answer 2

Let's 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

If there's nothing in there to begin with, just make that your default HTML and you've eliminated half of your jQuery.

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

And when your query has finished, just replace the single option with your results.

Answer 4

add this before ajax post

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

then again on success dynamically append dropdown

$('#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));
            }