是否可以在Internet Explorer 11中使用JavaScript设置选择元素的大小属性

Is it possible to set the size attribute of a select element using JavaScript in Internet Explorer 11?

本文关键字：选择 设置 JavaScript 元素 属性 Internet Explorer 是否      更新时间：2024-07-02

我有一个页面，上面有以下HTML

<select id="person" size="5" onchange="document.getElementById('person').size = 1;">
    <option value="Homer">Homer</option>
    <option value="Marge">Marge</option>
    <option value="Bart">Bart</option>
    <option value="Lisa">Lisa</option>
    <option value="Maggie">Maggie</option>
</select>

当您在列表中选择一个项目时，列表的大小设置为1（因此它呈现为组合框而不是列表框）。

使用Internet Explorer 11时，浏览器会崩溃。当使用其他浏览器进行测试时，没有问题。我尝试过以下浏览器：

  • Firefox 25.0.1
  • 铬31.0.1650.63米
  • Internet Explorer 10

这里有一把小提琴http://jsfiddle.net/pC9zL/11/包含上述HTML。

其他人经历过这个问题吗？如果是，他们是否知道任何可能的解决方案？

正如@CBroe所建议的，您可以创建一个新元素并用它替换当前元素。使用cloneNode创建一个"深度"副本，您可以这样做：

<select id="person" size="5" onchange="toDropdown(this)">
    <option value="Homer">Homer</option>
    <option value="Marge">Marge</option>
    <option value="Bart">Bart</option>
    <option value="Lisa">Lisa</option>
    <option value="Maggie">Maggie</option>
</select>
<script>
function toDropdown(select) {
  var dropdown = select.cloneNode(true);
  dropdown.selectedIndex = select.selectedIndex;
  dropdown.size = 1;
  select.parentNode.replaceChild(dropdown, select);
}
</script>

这不会使IE 11崩溃。更改渲染的select似乎有问题，需要完全更改渲染原理（从列表框到下拉框）。但是，当您将渲染的元素替换为另一个元素时，它可以处理这样的更改。

我遇到了同样的问题，并且发生在onChange事件中。使用onClick事件解决了崩溃问题

<select id="person" size="5" onclick="document.getElementById('person').size = 1;">
    <option value="Homer">Homer</option>
    <option value="Marge">Marge</option>
    <option value="Bart">Bart</option>
    <option value="Lisa">Lisa</option>
    <option value="Maggie">Maggie</option>
</select>

更多信息：http://social.msdn.microsoft.com/Forums/windows/en-US/4c5643f9-2d54-4a64-9f24-47a4b73fd618/select-box-size-change-crashes-ie11

相关文章：