chrome、firefox、ie11中的基本html代码函数，但不是ie9

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

本文关键字：函数 ie9 代码 ie11 firefox chrome html      更新时间：2023-09-26

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

目前，我的代码在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>

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

KB可能的解决方法之一是使用create选项元素，因此用下面的函数替换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);
        }
    }
相关文章：