javascript中的動態複選框列表 - 不工作

我試圖創建一個複選框列表，當從下拉列表中選擇某個元素時。但是，在下面的代碼中，我只獲取了複選框列表中的最後一個元素。也就是說，在輸出中，沒有3個複選框（我的數組的長度），但只有一個 - 僅與數組中的最後一個元素相關。javascript中的動態複選框列表 - 不工作

我在做什麼錯？

<!DOCTYPE html> 
<html> 
    <head> 
    <base target="_top"> 
    </head> 
    <body> 


    <script> 
    function chooseTable(db) { 


if(db=="hr.employee"){ 

var div = document.getElementById("table"); 

var ids = ["id","name", "write_uid"]; 

var main = document.getElementById('main1'); 

var parentElement = document.getElementById('ids'); 

for(var count in ids) 
{ 
    var newCheckBox = document.createElement('input'); 
    newCheckBox.type = 'checkbox'; 
    newCheckBox.id = 'id' + count; // need unique Ids! 
    parentElement.innerHTML = ids[count]; 
    newCheckBox.value = ids[count]; 
    parentElement.appendChild(newCheckBox); 

} 

} 
} 


</script> 
    <center> 
    <bold> 
    <h2> 
    Make Query 
    </h2> 
    </bold> 

<div id="main1"> 
<div> 

Choose database:<br/> 

<select id="table" name="table" onchange="chooseTable(this.value)"> 

    <option name="choice" value=""></option> 
    <option name="choice1" value="hr.employee">Employees</option> 
    <option name="choice2" value="account.account">Accounts</option> 
    </select> 
</div> 

<div id="ids"> 

</div> 
</div> 

</center> 

    </body> 
</html>

來源

2015-10-08 solving12

它更好，如果你更新的HTML代碼也。在你的代碼中，parentElement表示#ids這就是你爲什麼只看到最後一個write_uid ... – Webloper

問題是parentElement.innerHTML = ids[count];的代碼。它清除所有以前的HTML內容。要將標籤添加到複選框，最好使用標籤標籤。試試這個：

for(var count in ids) 
{ 
    var newCheckBox = document.createElement('input'); 
    newCheckBox.type = 'checkbox'; 
    newCheckBox.id = 'id' + count; // need unique Ids! 
    newCheckBox.value = ids[count]; 
    parentElement.appendChild(newCheckBox); 
    var newLabel = document.createElement('label'); 
    newLabel.innerHTML = ids[count]; 
    parentElement.appendChild(newLabel); 

}

來源

2015-10-08 08:09:40

因爲innerHTML方法會自行清理裏面的內容並重寫新元素。
試試這個怎麼樣？

for(var count in ids) 
      { 
       var newCheckBox = document.createElement('input'); 
       var newSpan = document.createElement('span'); 
       newCheckBox.type = 'checkbox'; 
       newCheckBox.id = 'id' + count; // need unique Ids! 
       newSpan.innerHTML = ids[count]; 
       newCheckBox.value = ids[count]; 
       parentElement.appendChild(newSpan); 
       parentElement.appendChild(newCheckBox); 

      }

來源

2015-10-08 08:04:52

javascript中的動態複選框列表 - 不工作

回答

相關問題