添加选项以选择框而不用Internet Explorer关闭框吗？
我正在尝试构建一个带有多个下拉选择框的网页，这些下拉选择框在首次打开时会异步加载其选项。这在Firefox下效果很好，但在Internet Explorer下效果不好。
下面是我要实现的一个小示例。基本上，有一个选择框(ID为" selectBox")，其中仅包含一个选项(" Any")。然后，有一个onmousedown处理程序，在单击该框时会加载其他选项。
<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会这样做)是：
- 用户会看到一个封闭的选择框，其中包含"任何"。
- 用户单击选择框。
- 选择框将打开以显示一个唯一的选项("任何")。
- 500毫秒后(或者AJAX调用返回时)，下拉列表将扩展为包括新选项(在此示例中，硬编码为"新选项")。
这就是Firefox所做的，这很棒。但是，在Internet Explorer中，只要在" 4"中添加了新选项，浏览器就会关闭选择框。选择框确实包含正确的选项，但是该框已关闭，要求用户单击以重新打开它。
那么，有人对我如何在不关闭IE下拉框的情况下异步加载选择控件的选项有任何建议吗？
我知道我可以在单击框之前加载列表，但是我正在开发的实际表单包含许多此类选择框，它们相互关联，因此如果我可以加载，这对客户端和服务器都会更好每组选项仅在需要时使用。
另外，如果结果是同步加载的，则在选择框的onmousedown处理程序完成之前，IE将按预期显示完整列表，但是，同步加载在这里是个坏主意，因为它会在网络请求被完全锁定时完全"锁定"浏览器。发生。
最后，我还尝试了在添加新选项后使用IE的click()方法打开选择框，但是不会重新打开选择框。
任何想法或者建议，将不胜感激！ :)
谢谢！
保罗
解决方案
我们是否考虑过在表单上其他相关字段之一的onblur事件中调用loadOptions方法？这将在单击列表之前将列表加载到下拉框中，但是行为仍应相似。
我认为我们将探索稍微不同的选项来获取所需的内容，因为如果我们使用onmousedown或者onclick事件，则Internet Explorer可能会关闭该下拉列表。使用这些事件的另一个缺点是，如果用户使用键盘选择字段，则可能永远不会调用方法。
我建议加载不依赖页面加载中其他选择框的选择内容。然后，在那些选择的onchange事件中，加载依赖于它们的其余选择的内容。
从编程的角度来看，想法是合理的，但是我们会在单击选择和填充所有选项(从用户的角度看似乎很草率)之间得到一定的滞后。
我找到了解决方案，问题似乎出在IE的onclick，hover，mouseover等实现上。将项目添加到下拉列表后，下拉列表关闭。如果我们没有在select属性中提供方法，请让jquery在运行时添加功能。
$(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>
