Question

如果没有jquery或AJAX，这是一项相对简单的任务。

我有几个javascript数组A和B，我在HTML表单中有多行，每行包含两个包含下拉列的列，每个列都包含A和B的内容。我想填充每个下拉列表具有预定义项目集的特定名称。这可以在页面加载后完成。

关于javascript会是什么样子的任何想法？我怎样才能解决一件名为一件事的物品？

Answer 1

这是您的某个阵列的代码：

// String values; can be used as name, id, or innerHTML 
var valsA = ['one','two','three'];
// Variable to store <option> object
var opt;

// Loop through vals and make an <option> for each one
for(var i=0;i<valsA.length;i++) {
  // Create node
  opt = document.createElement("OPTION");
  // Set innerHTML, if you want
  opt.innerHTML = valsA[i];
  // Set the names to be all the same, if you want
  opt.setAttribute("name","oneThing");
  // Set unique ID, somehow, if you want
  opt.id = "value"+i+valsA[i];
  // Finally, append <option> to dropdown menu
  document.getElementById('myDropdown').appendChild(opt);
}

在运行此脚本之前，您的HTML应准备好<select id='myDropdown'></select>。您可以为另一个阵列执行相同的过程。

另外，请记住名称

不一定是唯一的
可用于获取项目组

而ID

应该是唯一的
很遗憾，如果不是，您的脚本将会运行，这可能是错误的来源
应该用于获取单个对象

因此，请确保您的每个下拉菜单都有唯一的ID，以便您的脚本可以正确找到它。

Answer 2

如果您的HTML看起来像这样：

<body>
  <select id="fillme" name="fillme"></select>
  <select id="fillme" name="fillme"></select>
  <select id="fillme" name="fillme"></select>
  <select id="fillme" name="fillme"></select>
</body>

你只想填写多个数组中的值：

var a = ['one','two','three'];
var b = ['four', 'five'];

您可以连接数组并使用getElementsByName（只要选择具有与名称匹配的ID，IE需要它）。

var values = a.concat(b);
var selects = document.getElementsByName('fillme');

var i = selects.length;
while (i--) {
  var select = selects[i];
  for (var j=0,length=values.length; j<length; j++) {
      select.add(new Option(values[j]));
  }
}

JSBin演示： http://jsbin.com/ehoni4/2

使用静态值填充多个下拉菜单

2 个答案: