添加选项以选择框而不使用 Internet Explorer 关闭框？答案

【问题标题】：Add options to select box without Internet Explorer closing the box?添加选项以选择框而不使用 Internet Explorer 关闭框？
【发布时间】：2008-09-22 04:45:59
【问题描述】：

我正在尝试构建一个带有许多下拉选择框的网页，这些下拉选择框在第一次打开框时会异步加载它们的选项。这在 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 会这样做）是：

用户看到的是一个包含“Any”的封闭选择框。
用户点击选择框。
选择框打开以显示唯一的选项（“任何”）。
500 毫秒后（或当 AJAX 调用返回时）下拉列表展开以包含新选项（在此示例中硬编码为“新选项”）。

这正是 Firefox 所做的，这很棒。但是，在 Internet Explorer 中，只要在“4”中添加新选项，浏览器就会关闭选择框。选择框确实包含正确的选项，但该框已关闭，需要用户单击以重新打开它。

那么，有没有人对我如何在不关闭下拉框的情况下异步加载选择控件的选项有任何建议？

我知道我可以在框被点击之前加载列表，但是我正在开发的真实表单包含许多这样的选择框，它们都是相互关联的，所以它会 如果我可以仅在需要时加载每组选项，则对客户端和服务器都更好。

另外，如果结果是同步加载的，在选择框的 onmousedown 处理程序完成之前，IE 将按预期显示完整列表 - 但是，同步加载在这里是一个坏的想法，因为当网络请求发生时，它将完全“锁定”浏览器。

最后，我还尝试使用 IE 的 click() 方法在添加新选项后打开选择框，但这不会重新打开选择框。

任何想法或建议将不胜感激！ :)

谢谢！

保罗。

【问题讨论】：

标签： javascript ajax

【解决方案1】：

您是否考虑过在表单上其他相关字段之一的 onblur 事件中调用 loadOptions 方法？这会在单击之前将列表加载到下拉框中，但行为应该仍然相似。

我认为您将探索稍微不同的选项来获得您想要的内容，因为如果您使用 onmousedown 或 onclick 事件，您可能会遇到 Internet Explorer 关闭下拉列表的问题。使用这些事件的另一个缺点是，如果用户使用键盘选择字段，您的方法可能永远不会被调用。

【讨论】：

【解决方案2】：

我建议在页面加载时加载不依赖于任何其他选择框的选择内容。然后在这些选择的 onchange 事件中加载依赖于它们的其余选择的内容。

从编程的角度来看，您的想法是合理的，但是您会在单击选择和填充所有选项之间存在延迟，从用户的角度来看，这看起来有点草率。

【讨论】：

【解决方案3】：

我找到了一个解决方案，问题似乎在于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>

【讨论】：