8

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

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

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

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

在此处输入图像描述

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

------ 查看演示 ------

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

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

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

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

到目前为止我尝试过的

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

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

4

4 回答 4

3

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

于 2012-10-15T15:18:41.950 回答
2

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

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

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

或者这可能证明有一些用处？

于 2012-10-16T15:51:05.297 回答
1

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

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

于 2012-10-15T15:58:05.967 回答
0

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

于 2016-05-24T16:21:19.490 回答