填写HTML下拉列表

Question

我有一个包含多个HTML select下拉列表的页面，并且需要该元素的人口onclick。这个填充是使用select元素的单击事件监听器中的AJAX调用完成的。

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

此外，设计必须使用原生HTML select元素。

---

我创建了一个jsFiddle演示来显示问题。当您点击select时，项目会被填充，结果select的宽度会增加。

但select仅显示初始选项（在AJAX填充之前）。

的 ------ View Demo ------

Demo使用50毫秒的setTimeout()来模拟AJAX响应时间。

---

如何填充onclick并正确显示？

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

编辑：或者，是否有一个jQuery插件下拉列表，它使用浏览器的原生主题进行样式设计？

---

到目前为止我尝试了什么

• 在悬停时填充select，但快速用户可以在加载选项之前打开select。此外，如果用户要一直向下滚动页面以及每个select，这将导致大量不必要的AJAX调用。
• 将事件监听器更改为focus而不是click（建议为@AndyPerlitch）。但是，如果AJAX请求只需要50毫秒来响应，那么这将不起作用。 （See Demo）
• 将事件监听器更改为mousedown与focus
具有相同的效果

---

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

Answer 1

将事件更改为从click到focus

收听

Answer 2

我个人会完全选择不同的方法，但这取决于你的需要。在这里，我假设用户在某个时刻“几乎肯定”地点击（并因此加载）下拉列表。

考虑到这一点，我很想在加载页面后立即使用ajax填充select列表。这样做的好处是能够快速加载页面（因为仍然没有“页面加载”列表收集），但这也意味着在用户计算出需要使用选择列表之前，ajax很可能已完成。我甚至会采取额外的步骤并使用临时加载图标来代替所选择的，而ajax正在运行它的魔法（或禁用它们！）以防ajax有一个缓慢的一天，并且用户像超人一样快。

当然，这完全取决于用户与下拉元素交互时你的要求是如何“一成不变”的要求

---

或者this might prove some use？

Answer 3

选择将始终显示在点击事件开始之前。因此，您将只看到初始选项，因为您在单击事件开始后执行AJAX填充。

这可能是对您的妥协，但尝试在Click事件之前进行AJAX填充。这可能是： -on悬停，就像你已经完成的那样（用户必须滚动点击） - 在与选择

相邻的元素上为您的用户额外点击

Answer 4

隐藏下拉列表并在其位置放置其他内容供用户点击以触发加载下拉列表并显示它。