I have a page with following 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>

When you select an item in the list, the list's size is set to 1 (so it renders as a bo box rather than a list box).

When using Internet Explorer 11, the browser crashes. When testing with other browsers there is no problem. I have tried the following browsers:

• Firefox 25.0.1
• Chrome 31.0.1650.63 m
• Internet Explorer 10

There is a jsfiddle here / containing the above HTML.

Has anyone else experienced this problem and if so are they aware of any possible solutions?

I have a page with following 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>

When you select an item in the list, the list's size is set to 1 (so it renders as a bo box rather than a list box).

When using Internet Explorer 11, the browser crashes. When testing with other browsers there is no problem. I have tried the following browsers:

• Firefox 25.0.1
• Chrome 31.0.1650.63 m
• Internet Explorer 10

There is a jsfiddle here http://jsfiddle/pC9zL/11/ containing the above HTML.

Has anyone else experienced this problem and if so are they aware of any possible solutions?

• javascript
• html
• internet-explorer

• 1 Crash confirmed, IE 11. – Bud Damyanov Commented Dec 11, 2013 at 14:32
• 1 As a first workaround I’d try to clone the select element, set its size before the clone is appended to the DOM, and then replace the original select element with the clone. – C3roe Commented Dec 11, 2013 at 14:47
• Looks like a bug in IE11. Also setting size attribute to 1 or even removing it crashes IE11. I tried to found a report about the issue from Microsoft Connect, and found your report : ). – Teemu Commented Dec 11, 2013 at 15:28

2 Answers 2

As @CBroe suggests, you can create a new element and replace the current one by it. Using cloneNode to create a “deep” copy, you can do that this way:

<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>

This does not crash IE 11. It seems to have an issue with the change of a rendered select in a manner that requires a pletely change of the rendering principle (from listbox to dropdown). But it can handle such a change when you replace the rendered element by another one.

I have the same problem and occurs with onChange event. Using onClick event solved the crash problem

<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>

More info: http://social.msdn.microsoft./Forums/windows/en-US/4c5643f9-2d54-4a64-9f24-47a4b73fd618/select-box-size-change-crashes-ie11