动态下拉列表值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);​