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.

FYI, when you're adding items to the dropdown after you've retrieved it, steer clear of manually adding each option to the list if the number of options is more than a trivial amount. You'll want to do a batch insert similar to: var options = []; var index = -1; for (var item in items) { options[++index] = ''; } options[++index] = ''; $(ListBox).after(options.join('')); Warning code isn't tested and probably won't work as is. — Brian Hasden, Jul 13 '09 at 18:23
Ugh, the formatting isn't taking here, not real sure how to make it format properly. See http://stackoverflow.com/questions/815103/jquery-best-practice-to-populate-drop-down as a launching point for performance with a large number of options. Basically, you want to limit the amount of DOM manipulation you're doing. It's quicker to do one large insert into the DOM than to update it a large amount of times. — Brian Hasden, Jul 13 '09 at 18:30

score 13 · Accepted Answer · answered Jul 13 '09 at 17:40

13

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

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

answered Jul 13 '09 at 17:40

algiecas

2,108
14
13

Why call HTML method when you can simply do $('#myDropDown').prepend(''); Looks easier to read IMHO. – SolutionYogi Jul 13 '09 at 18:32
I'm New In Programming, Can You Tell Me, How Can I do That With my Code ? (https://stackoverflow.com/questions/42593871/ajax-combo-box-with-please-wait-label-for-loding-data) – Saeed Heidarizarei Mar 14 '17 at 12:05

SolutionYogi · Answer 2 · 2009-07-13T17:54:08.733

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 } 
              );


    }
);

score 2 · Answer 3 · answered Jul 13 '09 at 17:40

2

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.

answered Jul 13 '09 at 17:40

Sampson

265,109
74
539
565

this is the sanest option (no pun intended) in my opinion :) +1 – Andrei Rînea Aug 18 '09 at 06:52

score 1 · Answer 4 · answered Aug 26 '17 at 04:09

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));
            }

score 0 · Answer 5 · answered Jul 13 '09 at 17:42

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

Show "Loading..." in dropdown box

5 Answers5

Linked