是否可以在Internet Explorer 11中使用JavaScript设置select元素的size属性？

Question

我有一个包含以下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
• Chrome 31.0.1650.63 m
• Internet Explorer 10

这里有一个jsfiddle http://jsfiddle.net/pC9zL/11/包含上面的HTML.

有没有其他人遇到过这个问题,如果有,他们是否知道任何可能的解决方案？

Answer 1

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

\n\n

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

\n\n

这不会使 IE 11 崩溃。似乎存在以需要完全更改渲染原理（从列表框到下拉列表）的方式更改渲染的问题。 select但当您用另一个元素替换渲染的元素时，它可以处理这种变化。

\n