Fatal编程技术网
  • javascript/
  • Javascript 是否在Internet Explorer不关闭框的情况下添加选项以选择框？

Javascript 是否在Internet Explorer不关闭框的情况下添加选项以选择框？

javascript ajax

Javascript 是否在Internet Explorer不关闭框的情况下添加选项以选择框？,javascript,ajax,Javascript,Ajax,我试图构建一个包含许多下拉选择框的网页，这些框在第一次打开时异步加载它们的选项。这在Firefox下运行得很好，但在InternetExplorer下则不行 下面是我试图实现的一个小例子。基本上，有一个选择框（id为“selectBox”），它只包含一个选项（“任意”）。然后有一个onmousedown处理程序，在单击该框时加载其他选项 <html> <head> <script type="text/javascript"> function

我试图构建一个包含许多下拉选择框的网页，这些框在第一次打开时异步加载它们的选项。这在Firefox下运行得很好，但在InternetExplorer下则不行

下面是我试图实现的一个小例子。基本上，有一个选择框（id为“selectBox”），它只包含一个选项（“任意”）。然后有一个
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>


函数附加选项（选择，选项）{
试一试{
selectBox.add（选项，null）；//符合标准。
}捕获（e）{
selectBox.add（选项）；//仅IE版本。
}
}
函数loadOptions（）{
//模拟将调用
//500毫秒后加载选项回调函数。
设置超时（loadOptionsCallback，500）；
}
函数loadOptionsCallback（）{
var-selectBox=document.getElementById（'selectBox'）；
var option=document.createElement（'option'）；
option.text='新选项'；
附加选项（选择框，选项）；
}
任何
所需的行为（Firefox会这样做）是：

  • 用户看到的是一个包含“Any”的闭合选择框
  • 用户单击选择框
  • 选择框将打开以显示唯一选项（“任意”）
  • 500毫秒后（或者当AJAX调用返回时），下拉列表将扩展以包括新选项（在本例中硬编码为“new option”）
    • 这正是Firefox所做的，非常棒。但是，在Internet Explorer中，只要在“4”中添加了新选项，浏览器就会关闭“选择”框。“选择”框确实包含正确的选项，但该框已关闭，需要用户单击以重新打开

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

    我知道我甚至可以在点击框之前加载列表，但我正在开发的实际表单包含许多这样的选择框，它们都是相互关联的，因此如果我只在需要时加载每组选项，那么对客户端和服务器来说都会好得多

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

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

    如果您有任何想法或建议，我们将不胜感激！！：）

    谢谢

    Paul.

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

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

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

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

    我找到了解决方案，问题似乎在于IE对onclick，hover，鼠标悬停等。项目添加到下拉列表后，下拉列表关闭。如果您不在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>

    
任何
$（函数（）{
jQuery（“.selectBox”）.live（“焦点”，函数（）{
loadOptions（）；
});
});
函数附加选项（选择，选项）{
试一试{
selectBox.add（选项，null）；//符合标准。
}捕获（e）{
selectBox.add（选项）；//仅IE版本。
}
}
函数loadOptions（）{
//模拟将调用
//500毫秒后加载选项回调函数。
设置超时（loadOptionsCallback，500）；
}
函数loadOptionsCallback（）{
var-selectBox=document.getElementById（'selectBox'）；
var option=document.createElement（'option'）；
option.text='新选项'；
附加选项（选择框，选项）；
}