无法从 IE8 中的循环中获取值

Question

我正在根据另一个 select 中的 selection 填充 select。在 Chrome、FireFox、Safari、Edge 和 IE 9+ 中一切正常。

我的问题是在 IE8 中，它给我一个 "Unable to get value of the property 'makeID': object is null or undefined" 的错误。 IE 的开发人员工具指出第一个循环是问题所在，但我无法弄清楚问题所在。

$(function() {
    var makeList = {
        "makeTable": [
         {"makeID": "0", "makeName": "Select your make"}, 
         {"makeID": "1", "makeName": "Make 1"}, 
         {"makeID": "2", "makeName": "Make 2"}, 
         {"makeID": "3", "makeName": "Make 3"}, 
        ]
    };
    
    var modelList = {
        "Make 1": [
         {"modelID": "1", "modelName": "Make 1 Model 1"}, 
         {"modelID": "2", "modelName": "Make 1 Model 2"}, 
         {"modelID": "3", "modelName": "Make 1 Model 3"}, 
         {"modelID": "4", "modelName": "Make 1 Model 4"}, 
         {"modelID": "5", "modelName": "Make 1 Model 5"}, 
         {"modelID": "6", "modelName": "Make 1 Model 6"}
        ],
        "Make 2": [
         {"modelID": "1", "modelName": "Make 2 Model 1"}, 
         {"modelID": "2", "modelName": "Make 2 Model 2"}, 
         {"modelID": "3", "modelName": "Make 2 Model 3"}, 
         {"modelID": "4", "modelName": "Make 2 Model 4"}, 
         {"modelID": "5", "modelName": "Make 2 Model 5"}, 
         {"modelID": "6", "modelName": "Make 2 Model 6"}
        ],
       "Make 3": [
         {"modelID": "1", "modelName": "Make 3 Model 1"}, 
         {"modelID": "2", "modelName": "Make 3 Model 2"}, 
         {"modelID": "3", "modelName": "Make 3 Model 3"}, 
         {"modelID": "4", "modelName": "Make 3 Model 4"}, 
         {"modelID": "5", "modelName": "Make 3 Model 5"}, 
         {"modelID": "6", "modelName": "Make 3 Model 6"}
        ]
    };

    
    var makeItems = "";
    for (var i = 0; i < makeList.makeTable.length; i++) {
        makeItems += "<option value='" + makeList.makeTable[i].makeID + "'>" + makeList.makeTable[i].makeName + "</option>";
    }
    
    $("#makeSelect").html(makeItems);

    var updateModelSelect = function(make) {
        var listItems = "";
        for (var i = 0; i < modelList[make].length; i++) {
            listItems += "<option value='" + modelList[make][i].modelID + "'>" + modelList[make][i].modelName + "</option>";
        }
        $("select#modelSelect").html(listItems);
    };

    $("select#makeSelect").on('change', function() {
        var selectedMake = $('#makeSelect option:selected').text();
        updateModelSelect(selectedMake);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>Make</label>
<select id="makeSelect">
</select>
<br />

<label>Model</label>
<select id="modelSelect">
</select>

Answer 1

在 IE 8 中，如果数组中有尾部逗号，则数组长度实际上会增加 1。

在你的例子中，你有 4 个元素，但有一个尾部逗号，所以长度是 5。因此 makeList.makeTable[4].makeID 会给你 null object

Answer 2

问题是数组中多了一个逗号：

    "makeTable": [
        {"makeID": "0", "makeName": "Select your make"}, 
        {"makeID": "1", "makeName": "Make 1"}, 
        {"makeID": "2", "makeName": "Make 2"}, 
        {"makeID": "3", "makeName": "Make 3"}, 
    ]
};

Javascript 的最新版本允许在数组或对象文字中的最后一项之后使用可选的逗号，并忽略它。 IE8 将此视为表示另一个值为 undefined 的数组元素，因此它将数组的长度加 1。当您尝试访问此元素的属性时，出现错误。

改为：

    "makeTable": [
        {"makeID": "0", "makeName": "Select your make"}, 
        {"makeID": "1", "makeName": "Make 1"}, 
        {"makeID": "2", "makeName": "Make 2"}, 
        {"makeID": "3", "makeName": "Make 3"}
    ]
};

无法从 IE8 中的循环中获取值

Unable to get value from loop in IE8

javascript

internet-explorer-8