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

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 时，浏览器崩溃。用其他浏览器测试时没有问题。我试过以下浏览器:

• 火狐 25.0.1
• Chrome 31.0.1650.63 m
• Internet Explorer 10

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

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

Answer 1

正如@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 崩溃。它似乎对 rendered select 的更改有问题，需要完全更改呈现原则(从列表框到下拉列表)。但是当您用另一个元素替换呈现的元素时，它可以处理这种变化。