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

Question

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

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

事件绑定(bind)到元素，如下所示:

<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 不可行，因为选择框在其初始状态为空。*

Answer 1

一些想法:

1. 不要使用标准 html 选择框 - 您的应用程序无论如何都不会正常降级。

2. 使用一些点击劫持 - 在选择框上有一个透明的 div - IE 问题

3. 使用复选框允许“非标准”答案，这将填充选择框并使其可点击(未禁用)

4. 我最喜欢的:缓存查询结果并立即填充选择框。在选择框附近提供另一个“引用选项”按钮，以通过 AJAX 重新加载选项。