动态下拉列表值 JavaScript

dynamic drop down list values javascript

本文关键字：JavaScript 下拉列表 动态      更新时间：2023-09-26

我想用动态值填充我的下拉列表，但列表仍然为空，换句话说，没有显示任何选项 有人可以帮我!!这是我的代码 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);​

而不是

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

尝试

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

我不认为一次添加一点 HTML 有效，因为浏览器会尝试立即呈现它。

使用 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);​

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);​
相关文章：