動態下拉列表值javascript

Question

我想用動態值填充下拉列表，但列表仍然為空，也就是說沒有顯示任何選項有人可以幫我！ 這是我的代碼http://jsfiddle.net/n6ahz/24/

var newdiv = document.createElement('div');
var text="TEXT";
var n=0;
newdiv.innerHTML += "<br> Question " + (n) + " : " + text + " ? <br><br>";
var m = 0;

var options = '';
for (var j = 1; j < 5; j++) {
 var val = "marwa" + j;
if (val) {
    m++;
    options += " <option value="+j+"> " + val + "</option>";
     }
 }
 newdiv.innerHTML += "<select name='single' id='single'>";
 newdiv.innerHTML += " "+options + " </select> ";

document.getElementById('results').appendChild(newdiv);​

Answer 1

代替

newdiv.innerHTML += "<select name='single' id='single'>";
newdiv.innerHTML += " "+options + " </select> ";

嘗試

newdiv.innerHTML += "<select name='single' id='single'> "+options + " </select> ";

我不認為一次添加HTML是可行的，因為瀏覽器將嘗試立即呈現它。

Answer 2

使用innerHTML ，每次進行更改時，實際DOM都會更新。 因此，您無法可靠地進行零碎的更改。 創建一個類似var html的變量並將所有HTML更新保存到其中，然后設置element.innerHTML = html 。

var newdiv = document.createElement('div');
var html = "";
var text="TEXT";
var n=0;
html += "<br> Question " + (n) + " : " + text + " ? <br><br>";
var m = 0;

var options = '';
for (var j = 1; j < 5; j++) {
 var val = "marwa" + j;
 if (val) {
    m++;
    options += " <option value="+j+"> " + val + "</option>";
 }
}
html += "<select name='single' id='single'>";
html += " "+options + " </select> ";
newdiv.innerHTML = html;

document.getElementById('results').appendChild(newdiv);​

Answer 3

var newdiv = document.createElement('div');
var text="TEXT";
var n=1;
newdiv.innerHTML += "<br> Question " + (n) + " : " + text + " ? <br><br>";
var m = 1;

var options = '';
for (var j = 0; j <= 5; j++) {
     var val = "marwa" + j;
if (val) {
        m++;
        options += " <option value="+j+"> " + val + "</option>";
         }
    }
newdiv.innerHTML += "<select name='single' id='single'  "+options + " </select> ";

document.getElementById('results').appendChild(newdiv);​