Question

我正在尝试使用javascript生成一个选择表单，我希望表单有9个选项，其中包含来自“parties”数组的文本/值。但是，当我运行此代码时，它只生成一个选项，其中“派对”中的所有值都在一行之后。为什么循环不会产生9个选项，并且在每个选项之后只有一个来自“parties”数组的值？感谢帮助，因为我一直在努力找出问题的原因。

var parties = ["Mod", "S", "MP", "FP", "C", "SD", "KD", "F!", "V"];


var form = document.createElement("form");
form.setAttribute('method', "post");
form.setAttribute('action', "submit.php");

var input = document.createElement("input");
input.setAttribute('type', "text");
input.setAttribute('name', "username");

var submit = document.createElement("input");
submit.setAttribute('type', "submit");
submit.setAttribute('value', "Submit");

var select = document.createElement("select");

var option = document.createElement("option");

document.getElementsByTagName('body')[0].appendChild(form);
form.appendChild(select);

for (i = 0; i < 9; i++) {
    var optionValue = parties[i];
    var textNode = document.createTextNode(optionValue);

    select.appendChild(option);
    option.appendChild(textNode);
    form.appendChild(submit);
}

Answer 1

假设你想要价值＆amp;文字相同：

for (i = 0; i < 9; i++) {
   var option = document.createElement('option');
   option.value = option.innerHTML = parties[i];
   select.appendChild(option);
}

form.appendChild(submit);

Answer 2

移动了一些东西。特别注意循环。

jsFiddle

var parties = ["Mod", "S", "MP", "FP", "C", "SD", "KD", "F!", "V"];

// Create Form
var form = document.createElement("form");
form.setAttribute('method', "post");
form.setAttribute('action', "submit.php");

// Create Username Input
var input = document.createElement("input");
input.setAttribute('type', "text");
input.setAttribute('name', "username");
form.appendChild(input);

// Create Party Select
var select = document.createElement("select");
document.getElementsByTagName('body')[0].appendChild(form);
form.appendChild(select);

// Add Options to Select
for (var i = 0, n = parties.length; i < n; i++) {
    var option = new Option(parties[i], parties[i]);
    select.appendChild(option);
}

// Create Submit Button
var submit = document.createElement("input");
submit.setAttribute('type', "submit");
submit.setAttribute('value', "Submit");
form.appendChild(submit);

仔细看看

// Add Options to Select
for (var i = 0, n = parties.length; i < n; i++) {
    var option = new Option(parties[i], parties[i]);
    select.appendChild(option);
}

注意使用缓存parties.length到变量n并使用它来迭代。这样，如果parties将来发生变化，您可以随意添加/删除。这仅适用于您没有故意将选择数量限制为9的情况。

在循环内部，我们使用new Option()作为用户：some建议，它接受两个参数;第一个是显示的选项文本，第二个是选项的值。

最后，您应该注意到我们将select附加到表单，而不依赖于选项创建。我在循环之前移动它以将选择创建保存在一个地方，但它应该能够在之前或之后运行 - 事实上，您可能希望将选项向下移动到底部以使页面具有加载的外观更快（这只对处理器速度慢的机器有用）。

Answer 3

为了完善它，您可以使用Option constructor和ES5 forEach来执行此操作：

parties.forEach(function(value){
  select.appendChild(new Option(value, value));
}

但您可能需要forEach polyfill。

如何使用数组中的值生成选择选项？

3 个答案:

jsFiddle

仔细看看