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

Question

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. 这在Firefox下效果很好，但在Internet Explorer下效果不佳。

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"). 基本上，有一个选择框（ID为“ selectBox”），其中仅包含一个选项（“ Any”）。 Then there is an onmousedown handler that loads the other options when the box is clicked. 然后，有一个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>

The desired behavior (which Firefox does) is: 所需的行为（Firefox会这样做）是：

the user see's a closed select box containing "Any". 用户会看到一个封闭的选择框，其中包含“任何”。
the user clicks on the select box. 用户单击选择框。
the select box opens to reveal the one and only option ("Any"). 选择框将打开以显示一个唯一的选项（“任何”）。
500ms later (or when the AJAX call has returned) the dropped-down list expands to include the new options (hard coded to 'new option' in this example). 500毫秒后（或AJAX调用返回时），下拉列表将扩展为包括新选项（在此示例中，硬编码为“新选项”）。

So that's exactly what Firefox does, which is great. 这就是Firefox的功能，这很棒。 However, in Internet Explorer, as soon as the new option is added in "4" the browser closes the select box. 但是，在Internet Explorer中，只要在“ 4”中添加了新选项，浏览器就会关闭选择框。 The select box does contain the correct options, but the box is closed, requiring the user to click to re-open it. 选择框确实包含正确的选项，但是该框已关闭，要求用户单击以重新打开它。

So, does anyone have any suggestions for how I can load the select control's options asynchronously without IE closing the drop-down box? 那么，有人对我如何在不关闭IE下拉框的情况下异步加载选择控件的选项有任何建议吗？

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. 我知道，即使箱子被点击之前，我可以加载列表，但我发展，真正形成包含许多这样的选择框，这些都是相互关联的，所以它会多的客户端和服务器更好，如果我可以加载每组选项仅在需要时使用。

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. 另外，如果结果是同步加载的，则在选择框的onmousedown处理程序完成之前，IE将按预期显示完整列表-但是，同步加载在这里是一个坏主意，因为它会在网络请求时完全“锁定”浏览器正在发生。

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. 最后，我还尝试过使用IE的click()方法在添加新选项后打开选择框，但是不会重新打开选择框。

Any ideas or suggestions would be really appreciated!! 任何想法或建议，将不胜感激！ :) :)

Thanks! 谢谢！

Paul. 保罗

Answer 1

Have you considered calling the loadOptions method in the onblur event of one of the other interrelated fields on the form? 您是否考虑过在表单上其他相关字段之一的onblur事件中调用loadOptions方法？ This would load the list into the drop down box before it is clicked, but the behavior should still be similar. 这将在单击列表之前将列表加载到下拉框中，但是行为仍应相似。

I think you are going to have explore slightly different options to obtain what you want as you are probably stuck with Internet Explorer closing that drop down list if you use the onmousedown or onclick events. 我认为您将探索稍微不同的选项来获取所需的内容，因为如果使用onmousedown或onclick事件，Internet Explorer可能会关闭该下拉列表。 Another downside to using those events is if the user uses the keyboard to select the fields, your method may never get called. 使用这些事件的另一个缺点是，如果用户使用键盘选择字段，则可能永远不会调用您的方法。

Answer 2

I would suggest to load the contents of the selects that don't depend on any other select boxes on page load. 我建议加载不依赖页面加载中其他选择框的选择内容。 Then in the onchange event of those selects load the contents of the rest of the selects that depend on them. 然后，在那些选择的onchange事件中，加载依赖于它们的其余选择的内容。

Your idea is sound from a programming point of view, but you will get that lag between clicking on the select and it being populated with all the options which from the user's point of view looks kind of sloppy. 从编程的角度来看，您的想法是合理的，但是您会在单击选择和填充所有选项（从用户的角度看似乎很草率）之间得到一定的滞后。

Answer 3

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. 我找到了解决方案，问题似乎出在IE的onclick，hover，mouseover等实现上。将项目添加到下拉列表后，下拉列表关闭。 If you instead of providing the method in the select attribute, let jquery add the function at runtime it works. 如果您没有在select属性中提供方法，请让jquery在运行时添加功能。

$(function() {
    jQuery(".selectBox").live("focus", function() {
       loadOptions();
     });
});

The whole page: 整个页面：

<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 个解决方案

解决方案1
1 2008-09-22 05:06:19

解决方案2
1 2008-09-22 05:18:49

解决方案3
1 2010-07-13 18:59:01

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

问题描述

3 个解决方案

解决方案1 1 2008-09-22 05:06:19

解决方案2 1 2008-09-22 05:18:49

解决方案3 1 2010-07-13 18:59:01

解决方案1
1 2008-09-22 05:06:19

解决方案2
1 2008-09-22 05:18:49

解决方案3
1 2010-07-13 18:59:01