点击时填充 HTML 下拉列表答案

【问题标题】：Populate HTML dropdown onclick点击时填充 HTML 下拉列表
【发布时间】：2012-10-05 14:34:05
【问题描述】：

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

这样做的原因是性能和负载非常重要，因此它们不能在页面加载时填充。

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

我创建了一个 jsFiddle 演示来展示这个问题。当您单击select 时，项目被填充，select 的宽度因此增加。

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

------ View Demo ------

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

我怎样才能让它填充onclick，并正确显示？

有没有办法在人口响应回调时打开select？

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

到目前为止我所做的尝试

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

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

【问题讨论】：

用.mousedown()怎么样？
@Teneff 不幸的是没有。 jsfiddle.net/PJvM3/9

标签： javascript jquery html ajax select

【解决方案1】：

将要侦听的事件从 click 更改为 focus

【讨论】：

请记住，我们谈论的是 AJAX 调用。即使调用只需要 50 毫秒，您的解决方案也有相同的结果 jsfiddle.net/PJvM3/7
hmm... 数据仍会填充，但打开的选择不会更新。我想知道是否可以按照您尝试完成的方式更新来自选择的打开选项列表。似乎打开的选择有点像“冻结的快照”。
没错，就好像我需要阻止打开下拉菜单，直到回调响应，然后在其中编写一些代码（我猜在我的示例中的 setTimeout() 内）将打开它当它准备好了。那或者以某种方式告诉快照更新自己。
我尝试在焦点和单击事件上调用 preventDefault() ，但这并没有做任何事情。您可能需要使用 js 替代方案，例如 chosen。请参阅有关更新的文档

【解决方案2】：

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

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

当然，这完全取决于您的要求是如何在用户与下拉元素交互时执行 ajax 加载

或者this might prove some use？

【讨论】：

感谢您的回复。在玩了几个小时之后，我得出的结论是这是不可能的，逻辑设计必须改变。但是，我不希望在 DOM 上准备好 AJAX 调用（每个页面上可能有 100 个下拉菜单）。我正在考虑悬停下拉菜单，或者在它的 100px 距离内，下拉菜单被禁用，AJAX 调用，重新启用。

【解决方案3】：

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

这对您来说可能是一种妥协，但请尝试在点击事件之前进行 AJAX 填充。这可能是： -悬停时，就像您已经完成的那样（用户必须滚动才能点击） - 为您的用户在选择附近的元素上额外点击

【讨论】：

悬停可能不是一个合适的解决方案，因为如果用户悬停，然后立即单击，AJAX 响应可能没有发生
如果悬停不是一个选项，您可以选择第二种解决方案：在选择之前单击一个 div，然后单击该 div 将填充选择（强制用户单击两次）。
悬停，禁用选择，ajax返回时启用

【解决方案4】：

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

【讨论】：