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

Answer 2

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

在你的情况下你有4个元素，但有一个尾随逗号，所以长度是5.因此makeList.makeTable[4].makeID会给你null对象