Показать "Загрузка ..." в выпадающем списке

Question

Я выполняю запрос к базе данных, чтобы загрузить выпадающий список с помощью jquery. Есть ли способ отобразить слова "Загрузка ..." в раскрывающемся списке во время выполнения запроса?

Спасибо.

Answer 1

Вы можете добавить временный элемент в выпадающий список во время работы ajax:

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

Answer 2

Давайте назовем ваш выпадающий список 'userChoice', вы можете написать код как

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

добавить это перед постом ajax

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

затем снова в случае успеха динамически добавить выпадающий список

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

Answer 5

Если вы выполняете запрос через вызов AJAX, вы можете использовать что-то вроде следующего, чтобы сначала очистить выпадающий список и вставить сообщение загрузки (в Javascript на стороне клиента):

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