添加选项来选择框中没有Internet Explorer关闭的盒子？ [英] Add options to select box without Internet Explorer closing the box?
问题描述
我试图用了一些装载他们的选择时异步设备第一次打开下拉选择框建立一个网页。这个作品非常好火狐下，但不是在IE浏览器。
I'm trying to build a web page with a number of drop-down select boxes that load their options asynchronously when the box is first opened. This works very well under Firefox, but not under Internet Explorer.
下面是我想要实现的一个小例子。基本上，有一个选择框（id为选择框），其中只包含一个选项（任何）。再有就是一个onmousedown事件处理程序加载其他选项框被点击时。
Below is a small example of what I'm trying to achieve. Basically, there is a select box (with the id "selectBox"), which contains just one option ("Any"). Then there is an onmousedown handler that loads the other options when the box is clicked.
<html>
<head>
<script type="text/javascript">
function appendOption(select,option) {
try {
selectBox.add(option,null); // Standards compliant.
} catch (e) {
selectBox.add(option); // IE only version.
}
}
function loadOptions() {
// Simulate an AJAX request that will call the
// loadOptionsCallback function after 500ms.
setTimeout(loadOptionsCallback,500);
}
function loadOptionsCallback() {
var selectBox = document.getElementById('selectBox');
var option = document.createElement('option');
option.text = 'new option';
appendOption(selectBox,option);
}
</script>
</head>
<body>
<select id="selectBox" onmousedown="loadOptions();">
<option>Any</option>
</select>
</body>
</html>
所需的行为（其中Firefox没有）是：
The desired behavior (which Firefox does) is:
- 用户看到是一个包含一个封闭的选择框任何。
- 在用户点击的选择框。
- 选择框打开，露出一个和唯一的选择（任何）。
- 在500毫秒后（或当AJAX调用返回）的下降下拉列表将扩展为包括新的选项（硬codeD在这个例子中新的选项）。
所以，这正是火狐做，这是伟大的。然而，在Internet Explorer中，一旦新的选项被添加在4的浏览器关闭选择框。该选择框确实包含了正确的选择，但对话框关闭，需要用户点击重新打开它。
So that's exactly what Firefox does, which is great. However, in Internet Explorer, as soon as the new option is added in "4" the browser closes the select box. The select box does contain the correct options, but the box is closed, requiring the user to click to re-open it.
所以，没有任何人有我怎么可以加载选择控制的异步选项没有IE关闭下拉框有什么建议？
So, does anyone have any suggestions for how I can load the select control's options asynchronously without IE closing the drop-down box?
我知道，我可以加载的在的盒子甚至单击列表中，但真正形成我正在开发包含许多这样的选择框，这些都是相互关联的，所以这将是<强>多作为客户端和服务器，如果仅在需要时我可以加载每组选项更好。
I know that I can load the list before the box is even clicked, but the real form I'm developing contains many such select boxes, which are all interrelated, so it will be much better for both the client and server if I can load each set of options only when needed.
另外，如果被加载的结果，同时，选择框的onmousedown事件处理程序完成之前，那么IE浏览器将显示为预期的完整列表 - 然而，同步加载是一个坏的想法在这里，因为它会完全锁定浏览器，而网络请求正在发生。
Also, if the results are loaded synchronously, before the select box's onmousedown handler completes, then IE will show the full list as expected - however, synchronous loading is a bad idea here, since it will completely "lock" the browser while the network requests are taking place.
最后，我也试着使用IE的click（）方法，一旦新选项已被添加到打开的选择框，但不会重新打开选择框。
Finally, I've also tried using IE's click() method to open the select box once the new options have been added, but that does not re-open the select box.
任何意见或建议将是真正的AP preciated！ ：）
Any ideas or suggestions would be really appreciated!! :)
谢谢！
保罗。
推荐答案
我找到了一个解决办法，这个问题似乎在于IE的实施的onclick，悬停，鼠标悬停等项目后添加到下拉列表中，下拉关闭。而不是提供的方法，在选择属性，如果是你，让jQuery的在运行时它的工作原理添加功能。
I found a solution to this, the problem seems to lie in IE's implementation of onclick, hover, mouseover etc. After the items are added to the dropdown, the dropdown closes. If you instead of providing the method in the select attribute, let jquery add the function at runtime it works.
$(function() {
jQuery(".selectBox").live("focus", function() {
loadOptions();
});
});
整个页面：
<html>
<head>
<script src="jquery-latest.js" type="text/javascript"/>
</head>
<body>
<select id="selectBox" onmousedown="loadOptions();">
<option>Any</option>
</select>
<script type="text/javascript">
$(function() {
jQuery(".selectBox").live("focus", function() {
loadOptions();
});
});
function appendOption(select, option) {
try {
selectBox.add(option, null); // Standards compliant.
} catch (e) {
selectBox.add(option); // IE only version.
}
}
function loadOptions() {
// Simulate an AJAX request that will call the
// loadOptionsCallback function after 500ms.
setTimeout(loadOptionsCallback, 500);
}
function loadOptionsCallback() {
var selectBox = document.getElementById('selectBox');
var option = document.createElement('option');
option.text = 'new option';
appendOption(selectBox, option);
}
</script>
</body>
这篇关于添加选项来选择框中没有Internet Explorer关闭的盒子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
