jQuery-一次单击即可通过Ajax延迟加载单个选择框选项的正确方法

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

我已经实现了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请求之前显示一个空的下拉框,而在响应之后,不会刷新该下拉框.一个人必须在选择框外单击,然后再次单击它以查看更新的“选项”.

有什么方法可以强制其刷新内容？还是只是简单地自动选择第一个并隐藏下拉框？

**尝试聚焦,发现相同的结果. onmouseover有效,但“不可用”.由于选择框在初始状态下为空,因此onchange不可行.*

最佳答案

一些想法：

>不要使用标准的html选择框-无论如何,您的应用程序都不会正常降级.
>使用一些点击劫持-有一个透明的div覆盖框-IE问题
>使用复选框可允许“非标准”答案,该答案将填充选择框并使其可单击(未禁用)
>我的最爱：缓存查询结果并立即填充选择框.在选择框附近提供另一个“参考选项”按钮,以通过AJAX重新加载选项.