填写HTML下拉列表
我有一个页面，其中包含多个HTML select下拉列表，并且需要按人口select该元素。 这个填充是使用select元素的click事件监听器中的AJAX调用完成的。
原因是性能和负载非常重要，因此无法在页面加载时填充它们。
此外，设计必须使用本机HTML select元素。
我创建了一个jsFiddle演示来显示问题。 单击select ，将填充项目，因此select的宽度会增加。
但是， select仅显示初始选项（在AJAX填充之前）。
——观看演示——
Demo使用50毫秒的setTimeout()来模拟AJAX响应时间。
如何让这个填充onclick ，并正确显示？
有没有办法打开popualation响应的回调select ？
编辑：或者，是否有一个jQuery插件下拉列表，它使用浏览器的本机主题进行样式设置？
到目前为止我尝试过的
- 在hover时填充
select，但快速用户可以在加载选项之前打开select。 此外，如果用户要一直向下滚动页面和每个select，这将导致许多不必要的AJAX调用。 - 将事件侦听器更改为
focus而不是click（如@AndyPerlitch建议的那样）。 但是，如果AJAX请求只需要50毫秒来响应，这将不起作用。 （ 见演示 ） - 将事件侦听器更改为
mousedown与focus具有相同的效果
更新：这不是FireFox中的问题。 select打开，然后加载新项目并显示它们，所有这些都处于打开状态。
我个人会完全选择不同的方法，但这取决于你的需求。 在这里，我假设用户在某个时刻“几乎肯定”地点击（并因此加载）下拉列表。
考虑到这一点，我很想在加载页面后立即使用ajax填充select列表。 这样做的好处是能够快速加载页面（因为仍然没有“页面加载”列表收集），但这也意味着在用户计算出需要使用选择列表之前，ajax很可能是完整的。 我甚至会采取额外的步骤并使用临时加载图标来代替所选择的，而ajax正在运行它的魔法（或禁用它们！）以防ajax有一个缓慢的一天并且用户像超人一样快。
当然，这一切都取决于你的要求是如何在用户与下拉元素交互时执行ajax加载
或者这可能有用吗？
将事件更改为从click到focus进行侦听
select将始终显示为click事件开始之前的状态。 因此，您将只看到初始选项，因为您在单击事件开始后执行AJAX填充。
这可能是对你的妥协，但尝试在click事件之前进行AJAX填充。 这可能是： – hover，就像你已经完成的那样（用户必须滚动查看点击） – 在选择相邻的元素上为用户额外点击
隐藏下拉列表并在其位置放置其他内容供用户单击以触发加载下拉列表并显示它。