無法從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中的循環獲取值

回答

相關問題