JavaScript中的動態復選框列表-不起作用

Question

當嘗試從下拉列表中選擇某個元素時，我正在嘗試創建復選框列表。 但是，在以下代碼中，我僅獲得復選框列表中的最后一個元素。 也就是說，在輸出處，沒有3個復選框（我的數組的長度），但是只有一個-僅包含數組中的最后一個元素。

我究竟做錯了什么？

<!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>

Answer 1

因為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);

            }

Answer 2

問題是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);

}

JavaScript中的動態復選框列表-不起作用

問題描述

2 個解決方案

解決方案1
1 2015-10-08 08:04:52

解決方案2
1 已采納 2015-10-08 08:09:40

JavaScript中的動態復選框列表-不起作用

問題描述

2 個解決方案

解決方案1 1 2015-10-08 08:04:52

解決方案2 1 已采納 2015-10-08 08:09:40

解決方案1
1 2015-10-08 08:04:52

解決方案2
1 已采納 2015-10-08 08:09:40