Why does onChange crash Internet Explorer 7?

Question

We just released an online shop.

On this page the selectboxes crashes Internet Explorer 7 on some computers. Never on my computer. Does anybody knows why?

Live link: http://velour.se/collection/women/tops/eloise Update: turns out that the first like I posted did not crash. But the following does: http://velour.se/collection/women/outerwear/irina

Screendump: http://skitch.com/jesperlind/nc4j2/tops-eloise-velour-ie7-bug

Original version:

<select id="sizeDD" onchange="javascript:SizeChange(this);"></select>

//Internet Explorer problem.
function SizeChange(e){
    DrawAmountDD(GetAmountById(e.value));
}

Here's a bit of the code I think might be involved:

    function DrawAmountDD(maxAmount){
        /*var max = parseInt(maxAmount) > parseInt(maxShowAmount) ? maxShowAmount : maxAmount;
        var html = "";
        for(var i=1; i <= max; i++){
            html += "<option value='" + i + "'>" + i + "</option>";
        }
        $("#amountDD").html(html);*/

        var max = parseInt(maxAmount) > parseInt(maxShowAmount) ? maxShowAmount : maxAmount;
        var ddlAmount = document.getElementById("amountDD");
        ddlAmount.length=max;

        for(var a=1; a <= max; a++){
            ddlAmount.options[a-1].value = a;
            ddlAmount.options[a-1].text = a;
        }
    }

Version 2:

<select id="sizeDD"></select>
<select id="amountDD"></select>

<script type="text/javascript">
    var maxShowAmount = '5';
    var colorSizeArr =
      { "colSize":
        [
            { "color": "Black/Offwhite",
              "specificId": "2",
              "size": "XS",
              "amount": "1" }
        ]
      };

    colorSizeArr.colSize.push(
      { "color": "Black/Offwhite",
        "specificId": "13",
        "size": "S",
        "amount": "2" });

    $(document).ready(function () {
        var selectSizeDD = document.getElementById('sizeDD');
        selectSizeDD.onchange = function () { sizeChange(selectSizeDD); };
    });

    function sizeChange(e) {
        DrawAmountDD(GetAmountById(e.value));
    }

    function GetAmountById(specificId) {
        for (var i = 0; i < colorSizeArr.colSize.length; i++) {
            if (colorSizeArr.colSize[i].specificId == specificId) {
                return colorSizeArr.colSize[i].amount;
            }
        }
        return 1;
    }

    function DrawAmountDD(maxAmount) {
        var max = parseInt(maxAmount) > parseInt(maxShowAmount) ? maxShowAmount : maxAmount;
        var html = "";
        for (var i = 1; i <= max; i++) {
            html += "<option value='" + i + "'>" + i + "</option>";
        }
        $("#amountDD").html(html);

    }
</script>

Update

I have not figured out exatcly why Internet Explorer 7 crashes on some computers. Any way the code above had not any thing to do with it. It was much more simpler. The browser crashed when clicking on a select-box with only one option. Like this:

<select id="amountDD">
<option value="1">1</option>
</select>

I found some info on this link where it says that the single option should have a selected attribute as well but it does seems to crash for us with out the attribute.

http://www.akselvoll.net/2007/08/ie7-crashes-when-clicking-on-drop-down.html

Answer 1

First, there's no need for the javascript: prefix in your mark up. The handler will expect that it's javascript code and I'm surprised that any browsers actually parse it. Generally you see it as a protocol tag in an href attribute and, even that's not a good way to handle it. Second, the parameter to the function is a reference to the DOM element (select) whose value attribute may or may not be well supported. There's a good reference for HTML/Javascript DOM at http://www.w3schools.com. See the Select reference there. To get the value you may want to do e.options[e.selectedIndex].value. Third, it would probably be better all around to add the handler via javascript.

var select = document.getElementById( 'sizeDD' );
select.onchange = function() { sizeChange(select); };

Or since I see now that you are using jQuery:

$('sizeDD').change( sizeChange );

Answer 2

I hope by "crash" you mean "the JavaScript doesn't work", not "Internet Explorer crashes." If it's just the page, you can usually see the error by clicking "error on page" in the status bar.
Also, try some classic JavaScript debugging - comment out blocks of the function one at a time until you find the block that crashes it, then narrow it down to the line.

Answer 3

I will answer this my self as best as I can. If some body has a more detailed answer please add in and I will mark that one as accepted instead.

Internet Explorer 7 seems to crash on under some circumstances due to a bug in the browser or the system. The machines we had issues with were from HP running Vista. Perhaps the Vender had installed something disturbing the browser like the "Sign On on my HP ProtectTools Security" as described here: http://social.msdn.microsoft.com/Forums/en/iewebdevelopment/thread/63216546-9289-4345-898c-860d02db7357

Other possibillites are described here: http://www.akselvoll.net/2007/08/ie7-crashes-when-clicking-on-drop-down.html

Easy fix is to upgrade Internet Explorer to version 8.