Basic html code functions in chrome, firefox, ie11, but NOT ie9

Question

right now I am working on a basic website with two adjacent boxes, one that displays a list of fruits, and another that displays a list of the qualities of the fruit selected in the first box.

Currently, my code functions in chrome, firefox, and IE11 - but NOT in IE9. In IE9, neither onchange or onload works, and I get an error telling me the values in my array do not exist.

I'm very confused. Hopefully it's not too long for anyone to take a look at it! Advice on other flaws in my code is appreciated, but I'm really wondering why it doesn't run properly in IE9.

<html>
<head>
    <title>LISTBOX</title>
</head>
<body onload="fruit_choice_changed(event)">
    <form onchange = "change_form(event)">
        <input type="radio" id="listbox" name = "form_type" value="Listbox" checked>Listbox
        <input type="radio" id="dropdown" name = "form_type" value="Dropdown">Dropdown
    </form>
    <table>
        <tr>
            <td>
                <select id="fruit_options" size = "5" onchange = "fruit_choice_changed(event)" selected = "Apple">
                    <option selected>Apple</option>
                    <option>Banana</option>
                    <option>Coconut</option>
                    <option>Durian</option>
                    <option>Eggplant</option>
                    <option>Fig</option>
                    <option>Grape</option>
                </select>
            </td>
            <td>
                    <select id="fruit_display" size = "5">
                    </select>
            </td>
        </tr>
    </table>
</body>
<script>
    var changed = 0;
    var form_type = 0;
    var fruit_information = {"Apple":["Red", "Orchard", "5", "Bushel", "Delicious"], "Banana":["Yellow", "Tropical", "3"], "Coconut":["Brown", "Tropical", "7"], "Durian":["Yellow", "Tropical", "8"], "Eggplant":["Purple", "Orchard", "2", "Disgusting"], "Fig":["Brown", "Temperate", "5"], "Grape":["Purple", "Tropical", "60"]};
    function fruit_choice_changed(e) {
        var selected = document.getElementById("fruit_options");
        var displayStr = "";
        var fruit_details = fruit_information[String(selected.options[selected.selectedIndex].value)];
        for (j=0;j<fruit_details.length;j++){
            displayStr+="<option>"+fruit_details[j]+"</option>";
        }
        document.getElementById("fruit_display").innerHTML = displayStr;
    }
    function change_form(e){
        var radioForm = document.getElementById("fruit_options");
        radioForm.size = form_type%2*4+1;
        form_type+=1;
    }
</script>

possible duplicate: stackoverflow.com/questions/3496797/…. Another reference article: support.microsoft.com/kb/276228. The problem is IE's bug with overwriting select's innerHtml. — Benny Lin
– Benny Lin, Commented Nov 10, 2014 at 20:26

Max · Accepted Answer · 2014-11-10 20:36:44Z

0

As you can see on this KB276228 Microsoft Internet Explorer Fails to Set the innerHTML Property of the Select Object.

One of KB possible workaround is to use a create option element, so replace your fruit_choice_changed with the function below

function fruit_choice_changed(e) {
        var selected = document.getElementById("fruit_options");
        var fruit_details = fruit_information[String(selected.options[selected.selectedIndex].value)];

        for (j=0;j<fruit_details.length;j++){
            var option = document.createElement('option');
            option.text = fruit_details[j];
            option.value = j;
            document.getElementById("fruit_display").options.add(option);
        }
    }

answered Nov 10, 2014 at 20:36

Max

7,1503 gold badges51 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Basic html code functions in chrome, firefox, ie11, but NOT ie9

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related