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

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 2

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

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

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

If you are running the query through an AJAX call, you can use something like the following to first clear the dropdown list and insert the loading message (in client-side Javascript):

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