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

Question

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

我的问题是在 IE8 中，它给我一个错误“无法获取属性 'makeID' 的值:对象为 null 或未定义”。 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

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

    "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"}
    ]
};