生成列表

Question

所以我想从一个数组生成一个列表，我编写了以下代码：

function list() {

    table = new Array("Rabat", "Casablanca", "Marrakech", "Fes", "Tanger", "Agadir");
    document.write('<select id="list1" size=6><option value="Rabat">Rabat</option><option     value="Casablanca">Casablanca</option></select>');

}

它有效，但我想知道是否有更好的编码

Answer 1

您可以使用循环遍历列表中的所有项目：

// you can use this instead of the new Array() syntax:
var table = ["Rabat", "Casablanca", "Marrakech", "Fes", "Tanger", "Agadir"];
var select = '<select id="list1" size="6">';
for (var i=0; i<table.length; i++) {
    select += '<option value="' + table[i] + '">' + table[i] + '</option>';
}
select += '</select>';
document.write(select); //you should probably not use document.write though...

通常最好不要使用document.write。相反，您应该尝试选择要附加的元素，然后将文本添加到该元素。

Answer 2

HTML：

<select id="list1" size="6"></select>

JS：

function list() {
    var i,
        table = ["Rabat", "Casablanca", "Marrakech", "Fes", "Tanger", "Agadir"],
        select = document.getElementById('list1'),
        out;

    for (i = 0; i < table.length; ++i) {
        out += "<option value='" + table[i] + "'>" + table[i] + "</option>";
    }

    select.innerHTML = out;
}

FIDDLE：
http://jsfiddle.net/Z9XKp/

Answer 3

你可以循环遍历数组并创建你的字符串，而不是一遍又一遍地编写相同的代码。

var list="";
for(i=0;i<table.length;i++){
var val=table[i];
  list+="<option value='"+val+"'>"+val+"</option";
 }