填充HTML下拉的onclick [英] Populate HTML dropdown onclick

问题描述

我有一个页面，其中包含多个HTML 选择下拉列表，并要求人口的onclick 元素。使用AJAX调用中的单击事件侦听器这类人群做的是选择元素。

I have a page which contains multiple HTML select dropdowns, and requires population onclick of the element. This population is done using an AJAX call in the click event listener of the select elements.

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

The reason for this is that performance and load are very crucial, and therefore they cannot be populated on page load.

此外，设计必须使用本地HTML 选择元素。

Also, the design must use the native HTML select element.

我已经创建了一个的jsfiddle演示显示问题。当你点击选择的物品填充，和宽度的选择增大结果。

I have created a jsFiddle demo to show the issue. When you click on the select the items are populated, and the width of the select increases as a result.

然而选择只显示最初的选项（之前AJAX人口）。

However the select only displays the initial option (prior to AJAX population).

演示使用的setTimeout（） 50毫秒效仿的Ajax响应时间。的

Demo uses setTimeout() of 50 milliseconds to emulate an AJAX response time.

我怎样才能得到它来填充的onclick ，并正确显示？

How can I get this to populate onclick, and display correctly?

有没有打开的方式选择在popualation响应的回调？

Is there a way of opening the select on callback of the popualation response?

编辑：另外，有一个jQuery插件下拉菜单，它使用浏览器的原生主题造型

我到目前为止已经试过

• 填充选择悬停，但快速的用户可以打开选择选项已加载之前。此外，如果用户是向下滚动页面，所有的方式，并在每个选择，这会引起很多不必要的Ajax调用。
• 更改事件监听器焦点而不是点击（为的 @ AndyPerlitch 建议）。然而，这将不是如果AJAX请求仅用50毫秒响应工作。 （见演示）
• 更改事件监听器鼠标按下有同样的效果焦点

• Populating the select on hover, however a quick user can open the select before the options have loaded. Also, if a user was to scroll all the way down the page, and over every select, this would cause a lot of unnecessary AJAX calls.
• Changing the event listener to focus instead of click (as @AndyPerlitch suggested). However, this wouldn't work if the AJAX request took only 50 milliseconds to respond. (See Demo)
• Changing the event listener to mousedown has the same effect as focus

更新：这不是在FireFox的问题。 选择打开，然后加载新项目，并显示它们处于打开状态，所有的时间。

UPDATE: This is not an issue in FireFox. select opens, then loads new items and displays them, all while in an open state.

推荐答案

我个人会选择一种不同的方法完全，但是这取决于你的需要。在这里，我假设下拉会几乎可以肯定被点击（和加载）在某些时候用户。

Personally I would opt for a different approach completely, but it depends on you needs. Here I am assuming that the drop down will "almost definitely" be clicked (and thus loaded) at some point by the user.

考虑到这一点我会被诱惑填充选择只要在页面加载使用ajax的列表。这具有能够加载的页面快速（因为目前还没有网页加载清单收集）的利益，但同时也意味着用户工作之前，他们需要使用选择列表中的AJAX将最有可能是完整的。我甚至会去一个额外的步骤，并有短暂的加载图标代替的选择，而Ajax是工作它的魔力（或禁用它们！）的情况下，Ajax是有一个缓慢的一天，用户是快得像超人。

With that in mind I would be tempted to populate the select lists using ajax as soon as the page is loaded. This has the benefit of being able to load the page quick (as there is still no "page load" list collecting) but it also means the ajax will most likely be complete before the user works out that they need to use the select list. I would even go an extra step and have temporary loading icons in place of the selected while the ajax is working it's magic (or disable them!) in case the ajax is having a slow day and the user is fast like superman.

当然，这一切都取决于一成不变您的要求就是做在用户交互的AJAX负载下拉元素

of course, this all depends on how "set in stone" your requirement is to do the ajax load upon user interaction with the drop down element

或者这有可能成为一些使用？

这篇关于填充HTML下拉的onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！