3

我有一个网页，其中有 2 个下拉菜单彼此相邻。当您更改一个下拉列表时，我会转到服务器并更新第二个下拉列表中的值。由于这需要几秒钟，我在下面有这段代码，它在等待时显示了一个 ajax 加载图像。

这个问题是，因为我在使用插入之后，当它运行时，它会将第二个下拉列表推到几个像素上，当它完成时，下拉列表会向后移动。

避免这种情况的最佳方法是什么。我不知何故需要保留一个与图像具有相同宽度的占位符，所以当我显示它时，它会阻止其他所有东西移动。

var spinner = $("<img src='/Content/images/ajax-loader.gif' />").insertAfter(item);

$.getJSON("/GetId/" + item.val(), function (data) {
    if (data.Id > 0) {
        $("#SecondDropdown").val(data.Id);
    }
    spinner.remove();
});
4

2 回答 2

2

位置：绝对在容器中的微调器上，这就是我一直这样做的方式。

<body>
    <div id='ajax_loader'></div>
    <div>
        <select name='1'>
            <option value='yes'>Yes</option>
            <option value='no'>No</option>
        </select>
        <select name='2'>
            <option value='yes'>Yes</option>
            <option value='no'>No</option>
        </select>
    </div>
</body>

基本上将带有 ajax 加载器的 div 首先放在文档中，并根据需要隐藏和显示它。

于 2011-04-18T03:34:58.707 回答
0

如果您使用的是 jQuery UI，则可以使用该position方法相对于下拉菜单绝对定位微调器：

var spinner = $('<img src="/Content/images/ajax-loader.gif" />');

spinner.position({
    my: "left top",
    at: "right top",
    of: item,
    collision: "fit"
});

spinner.insertAfter(item);
于 2011-04-18T13:46:07.393 回答