Question

我正在尝试构建一个带有多个下拉选择框的网页，这些选择框在首次打开该框时异步加载其选项。这在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”的已关闭选择框。
用户点击选择框。
选择框将打开以显示唯一选项（“任意”）。
500ms之后（或者当AJAX调用返回时），下拉列表会扩展为包含新选项（在此示例中硬编码为“新选项”）。

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

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

我知道我可以在之前加载列表甚至点击该框，但我正在开发的真实表单包含许多这样的选择框，这些框都是相互关联的，因此它将是更好。

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

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

任何想法或建议都会非常感激!! ：）

谢谢！

保罗。

Answer 1

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

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

Answer 2

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

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

Answer 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>

在没有Internet Explorer关闭框的情况下添加选项框选项？

3 个答案: