无法从IE8中的循环获取值

我正在根据另一个选择中的选择填充选择。在Chrome，FireFox，Safari，Edge和IE 9+中，一切都很好用。无法从IE8中的循环获取值

我的问题是在IE8中，它给了我一个错误“无法获取属性的值'makeID'：object is null or undefined”。 IE的开发人员工具指出第一个循环是问题，但我无法弄清楚什么是错误的。

$(function() { 
 
    var makeList = { 
 
     "makeTable": [ 
 
     \t {"makeID": "0", "makeName": "Select your make"}, 
 
\t   {"makeID": "1", "makeName": "Make 1"}, 
 
\t   {"makeID": "2", "makeName": "Make 2"}, 
 
\t   {"makeID": "3", "makeName": "Make 3"}, 
 
     ] 
 
    }; 
 
    
 
    var modelList = { 
 
     "Make 1": [ 
 
     \t {"modelID": "1", "modelName": "Make 1 Model 1"}, 
 
     \t {"modelID": "2", "modelName": "Make 1 Model 2"}, 
 
     \t {"modelID": "3", "modelName": "Make 1 Model 3"}, 
 
     \t {"modelID": "4", "modelName": "Make 1 Model 4"}, 
 
     \t {"modelID": "5", "modelName": "Make 1 Model 5"}, 
 
     \t {"modelID": "6", "modelName": "Make 1 Model 6"} 
 
     ], 
 
     "Make 2": [ 
 
     \t {"modelID": "1", "modelName": "Make 2 Model 1"}, 
 
     \t {"modelID": "2", "modelName": "Make 2 Model 2"}, 
 
     \t {"modelID": "3", "modelName": "Make 2 Model 3"}, 
 
     \t {"modelID": "4", "modelName": "Make 2 Model 4"}, 
 
     \t {"modelID": "5", "modelName": "Make 2 Model 5"}, 
 
     \t {"modelID": "6", "modelName": "Make 2 Model 6"} 
 
     ], 
 
     "Make 3": [ 
 
     \t {"modelID": "1", "modelName": "Make 3 Model 1"}, 
 
     \t {"modelID": "2", "modelName": "Make 3 Model 2"}, 
 
     \t {"modelID": "3", "modelName": "Make 3 Model 3"}, 
 
     \t {"modelID": "4", "modelName": "Make 3 Model 4"}, 
 
     \t {"modelID": "5", "modelName": "Make 3 Model 5"}, 
 
     \t {"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>

来源

2016-08-15 awsm

由于某种原因，阵列的长度是5 IE 8 – Steve

这是额外的'因为，'在阵列的端部。 IE8不理解，这应该被忽略。 – Barmar

这将解释为什么你得到你的错误，你正确地迭代0-> 3，但然后makeTable [4]不存在。 –

问题是数组中额外的逗号：

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

来源

2016-08-15 18:50:05 Barmar

在IE 8如果您的阵列中的拖尾逗号数组长度实际上是由1

递增你的情况您有4个元素，而是与拖尾逗号所以长度是5.因此makeList.makeTable[4].makeID会给你null对象

来源

2016-08-15 18:48:32 Steve

无法从IE8中的循环获取值

回答

相关问题