单击后通过ajax延迟加载单个选择框选项的正确方法答案

【问题标题】：Proper way of lazy-loading a single select box options via ajax once clicked单击后通过ajax延迟加载单个选择框选项的正确方法
【发布时间】：2010-10-29 14:40:32
【问题描述】：

我有一个选择框，只有在单击时才会填充。所涉及的查询需要很长时间，因此我将其从页面上显示的标准数据中分离出来。

我已经实现了函数loadMyData(element, id)，它执行ajax 请求并将数据作为JSON 返回。然后它填充选择框。

事件绑定到元素如下：

<select onclick="loadMyData(this, 1)">
</select>

选择框填充如下：

$.each(data, function(index, optionData) {
  select.options[element.options.length] 
             = new Option(optionData.Text, optionData.Value);
});

在基于 Gecko 的浏览器上有效，但在 Webkit 浏览器（safari 和 chrome）上，当我单击选择框时，在 ajax 请求之前和响应之后显示一个空的下拉框，下拉框是没有刷新。必须在选择框外单击并再次单击它才能看到更新的“选项”。

有没有办法强制它刷新内容？还是简单地自动选择第一个并隐藏下拉框？

**尝试 onfocus 并发现相同的结果。 onmouseover 有效，但“不可用”。 onchange 不可行，因为选择框在其初始状态下是空的。*

【问题讨论】：

你有没有考虑过对这个使用同步请求？这可能会消除任何时间滞后，并让选择框有机会正确更新！另外，为什么要基于 onclick 加载？是否可以在到达下拉列表之前根据用户与其他 UI 元素的交互来执行更新？如果选择不依赖于任何其他 UI 选择，为什么不预先填充它？
或者作为事后的想法......为什么不在 DOM Ready 上触发加载功能，尽管处于异步模式？这样，初始页面会立即加载，而无需执行长查询，并且浏览器不会死机……当用户准备好使用 UI 元素时，选择框已被静默填充！

标签： jquery ajax select webkit onclick

【解决方案1】：

在 Safari 上，问题在于它应该是 onchange 的 onclick 事件。

在此处查看解决方案：http://munteanutraian.info/forum/?p=5

【讨论】：

【解决方案2】：

像往常一样，这里的坏浏览器是 IE 6 及以下版本，因为它在选择选项上有这个只读的东西，所以处理它的唯一方法是替换整个选择。

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>lazy loading thing</title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/script.js" type="text/javascript"></script>
    </head>
    <body>
        <form>
            <p>
                <span id="replaceMe"><select name="drinks">
                    <option>oh well... click me...</option>
                </select></span>
            </p>
        </form>
    </body>
</html>

script.js

$(function() {
     $('#replaceMe').one('click', replaceIt);
});

function replaceIt(e) {
    $(this).html('now wait...');
    $.post('options.php', {}, replaceItHandler, 'json');
}

function replaceItHandler(options) {
    var select = '<select name="drinks">';
    $.each(options, function(i, option) {
        select += '<option value="' + option.data + '">' + option.label + '</option>';
    });
    select += '</select>';
    $('#replaceMe').html(select);
}

options.php

<?php
$options[] = array('data' => 0, 'label' => 'Water');
$options[] = array('data' => 0, 'label' => 'Wine');
$options[] = array('data' => 0, 'label' => 'Beer');
$options[] = array('data' => 0, 'label' => 'Coke');
echo json_encode($options);
?>

很明显，您可以使用 PHP 或类似的 JSON 或发送整个选择，这是您的选择。

【讨论】：

它在 ie8 上工作，唯一不能工作的浏览器是基于 webkit 的浏览器（chrome 和 safari）。替换整个选择框是一个想法，但我宁愿显示一个按钮，然后单击它用选择框替换它。我不想使用额外的 html 元素来加载选择框的内容，但我想在使用标准 html 选择框时没有其他方法。
正在我的 Google Chrome (1.0.154.65) 甚至 Opera (9.64) 中工作，我刚刚在一分钟前进行了测试。

【解决方案3】：

一些想法：

不要使用标准的 html 选择框 - 无论如何，您的应用程序都不会优雅地降级。
使用一些点击劫持 - 有一个透明的 div OVER 选择框 - IE 的问题
使用复选框来允许“非标准”答案，这将填充选择框并使其可点击（未禁用）
我的最爱：缓存查询结果并立即填充选择框。在选择框附近提供另一个“引用选项”按钮以通过 AJAX 重新加载选项。

【讨论】：

我放弃缓存，因为它应该显示新数据。我会使用点击劫持黑客，但感觉很脏，所以我想我只是要使用标准按钮并在点击后将其替换为“新鲜”选择框。