chrome、firefox、ie11 中的基本 html 代码功能，但不是 ie9答案

【问题标题】：Basic html code functions in chrome, firefox, ie11, but NOT ie9chrome、firefox、ie11 中的基本 html 代码功能，但不是 ie9
【发布时间】：2014-11-10 19:48:34
【问题描述】：

现在我正在开发一个带有两个相邻框的基本网站，一个显示水果列表，另一个显示第一个框中所选水果的品质列表。

目前，我的代码可以在 chrome、firefox 和 IE11 中运行，但不能在 IE9 中运行。在 IE9 中，onchange 或 onload 都不起作用，并且我收到一条错误消息，告诉我数组中的值不存在。

我很困惑。希望大家看的时间不会太长！感谢您就我的代码中的其他缺陷提出建议，但我真的想知道为什么它在 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>

【问题讨论】：

你能发布你得到的确切错误信息吗？
可能重复：stackoverflow.com/questions/3496797/…。另一篇参考文章：support.microsoft.com/kb/276228。问题是 IE 覆盖 select 的 innerHtml 的错误。

标签： javascript html internet-explorer-9

【解决方案1】：

正如您在 KB276228 上看到的那样，Microsoft Internet Explorer 无法设置 Select 对象的 innerHTML 属性。

KB 可能的解决方法之一是使用创建 option 元素，因此将 fruit_choice_changed 替换为以下函数

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);
        }
    }

【讨论】：