在下拉框中显示“正在加载...”答案

【问题标题】：Show "Loading..." in dropdown box在下拉框中显示“正在加载...”
【发布时间】：2010-11-10 09:25:00
【问题描述】：

我正在运行数据库查询以使用 jquery 加载下拉框。有没有办法在查询运行时在下拉框中显示“正在加载...”字样？

谢谢。

【问题讨论】：

仅供参考，当您在检索后将项目添加到下拉列表时，如果选项数量超过一个微不足道的数量，请避免手动将每个选项添加到列表中。您需要执行类似于以下内容的批量插入： var options = [];变量索引 = -1; for (var item in items) { options[++index] = ''; } 选项[++index] = ''; $(ListBox).after(options.join(''));警告代码未经测试，可能无法按原样工作。
呃，这里没有格式化，不确定如何正确格式化。请参阅 stackoverflow.com/questions/815103/… 作为具有大量选项的性能的起点。基本上，你想限制你正在做的 DOM 操作的数量。向 DOM 中进行一次大插入比多次更新它要快。

【解决方案1】：

您可以在 ajax 运行时将临时项目添加到下拉列表中：

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

【讨论】：

当你可以简单地做 $('#myDropDown').prepend(''); 时为什么要调用 HTML 方法看起来更容易阅读恕我直言。
我是编程新手，你能告诉我，我如何用我的代码做到这一点？ (stackoverflow.com/questions/42593871/…)

【解决方案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 } 
              );


    }
);

【讨论】：

【解决方案3】：

如果这里没有任何内容，只需将其设为默认 HTML，即可消除一半的 jQuery。

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

当您的查询完成后，只需将单个 option 替换为您的结果即可。

【讨论】：

在我看来这是最明智的选择（没有双关语）:) +1

【解决方案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));
            }

【讨论】：

【解决方案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
...

【讨论】：