選擇標記沒有出現在選擇的Javascript

Question

我有一個JavaScript數組，我想通過它迭代來創建<select>標記中的選項。

var sBoxContent = "categorieBox_content"; 
var oBoxContent = document.getElementById(sBoxContent); 

oBoxContent.innerHTML += "<select name=\"clientCategories\">"; 

for(var i=0;i<oClientCategories.length;i++) { 
     var categorieId = oClientCategories[i].id; 
     var categorieLabel = oClientCategories[i].label; 

     oBoxContent.innerHTML += "<option value=\"" + categorieId + "\">" + categorieLabel + "</option>"; 
} 

oBoxContent.innerHTML += "</select>"; 

該陣列可以正常工作，因爲選項顯示正常，但它出現在<select>標籤之外。

HTML：

<td> 
<select name="clientCategories"></select> 
<option value="1">CategoryName</option> 
</td> 

Answer 1

因爲innerHTML嘗試總是創建有效的語法，

oBoxContent.innerHTML += "<select name=\"clientCategories\">"; 

實際創建此DOM片段：

<select name="clientCategories"></select> 

因此，您需要先組裝您的HTML字符串，分配前到innerHTML：

var sBoxContent = "categorieBox_content"; 
var oBoxContent = document.getElementById(sBoxContent); 
var myHTML = ""; 


myHTML += "<select name=\"clientCategories\">"; 

for(var i=0;i<oClientCategories.length;i++) { 
     var categorieId = oClientCategories[i].id; 
     var categorieLabel = oClientCategories[i].label; 

     myHTML += "<option value=\"" + categorieId + "\">" + categorieLabel + "</option>"; 
} 

myHTML += "</select>"; 
oBoxContent.innerHTML += myHTML; 

Answer 2

innerHTML是怪異，不喜歡一個字符串相當的工作。您傳入的HTML會被解析，因此您傳入的最初<select>會自動關閉。

取而代之，將其構建爲一個字符串，並在事後使用innerHTML。

var oBoxContentHTML = "<select name='clientCategories'>"; 
// etc. 
oBoxContent.innerHTML += oBoxContentHTML; 

Answer 3

我會使用document.createElement（）而不是隻是搞亂HTML字符串。

var oClientCategories = [{id: 1, label:"one"},{id: 2, label: "two"},{id: 3, label: "three"}]; 
var selectBox = document.createElement("select"); 

for(var i=0;i<oClientCategories.length;i++){ 
    var elem = oClientCategories[i]; 
    var addedOption = document.createElement("option"); 
    addedOption.value = elem.id; 
    addedOption.innerHTML = elem.label; 
    selectBox.appendChild(addedOption); 
} 

var cont = document.getElementById("categorieBox_content"); 
cont.appendChild(selectBox); 

工作的jsfiddle：http://jsfiddle.net/V3fjx/