填写HTML下拉列表

Question

我有一个包含多个HTML select下拉列表的页面,并且需要onclick元素的填充.在select元素的单击事件侦听器中使用AJAX调用完成此填充.

原因是性能和负载非常重要,因此无法在页面加载时填充它们.

此外,设计必须使用本机HTML select元素.

---

我创建了一个jsFiddle演示来显示问题.当您单击时,select将填充项目,并且结果的宽度会select增加.

但是,select只显示初始选项(在AJAX填充之前).

------观看演示------

演示使用setTimeout()50毫秒来模拟AJAX响应时间.

---

如何才能填充onclick并正确显示？

有没有办法打开select人口回应的回调？

编辑:或者,是否有一个jQuery插件下拉列表,它使用浏览器的本机主题进行样式设置？

---

到目前为止我尝试过的

• 填充select上悬停,但是快速的用户可以打开select该选项已加载之前.此外,如果用户要一直向下滚动页面,并且每次都滚动select,这将导致许多不必要的AJAX调用.
• 更改事件侦听器focus而不是click(如@AndyPerlitch建议的那样).但是,如果AJAX请求只需要50毫秒来响应,那么这将不起作用.(见演示)
• 将事件侦听器更改为mousedown具有相同的效果focus

---

更新:这不是FireFox中的问题.select打开,然后加载新项目并显示它们,所有这些都处于打开状态.

Answer 1

就我个人而言，我会选择完全不同的方法，但这取决于您的需求。在这里，我假设用户“几乎肯定”会在某个时刻单击（并因此加载）下拉菜单。

考虑到这一点，我会select在页面加载后立即使用 ajax 填充列表。这样做的好处是能够快速加载页面（因为仍然没有“页面加载”列表收集），但这也意味着 ajax 很可能在用户确定他们需要使用选择列表之前完成。我什至会采取额外的步骤，在 ajax 工作时使用临时加载图标来代替所选图标，这很神奇（或禁用它们！），以防 ajax 过得很慢，而用户像超人一样快。

当然，这一切都取决于您的要求如何“一成不变”，以便在用户与下拉元素交互时执行 ajax 加载

或者也许这可能有用？