Javascript 向多个选择元素添加选项

我有一个HTML页面，包括一个包含多个

元素的表单。我知道如何将元素加载到单个

；下面是一段代码，按照我的预期工作：

$(function() {
    google.script.run.withSuccessHandler(buildProjectList)
    .getProjects();
  });

  function buildProjectList(options) {
    var list = $('#projectList');
    list.empty();
    for (var i=0; i<options.length; i++) {
      list.append('<option value="' + options[i] + '">' + options[i] + '</option>');
    }
  }

根据我所做的一些搜索，我尝试了一些不同的方法，但无论我尝试什么，我都会收到相同的错误消息。我假设这与getElementById和GetElementsByCassName之间的差异有关。一个返回元素本身，另一个返回元素数组。但我认为我应该能够遍历该数组，并使用add函数

我可以看到迭代正在工作；以下是console.log（选择）在循环遍历每个元素时显示的内容：

<select id=​"busMerchPlan" name=​"busMerchPlan" class=​"resourceSize">​</select>
<select id=​"busMerchAlloc" name=​"busMerchAlloc" class=​"resourceSize">​</select>​
<select id=​"busMerchBuy" name=​"busMerchBuy" class=​"resourceSize">​</select>​
<select id=​"busMerchPDD" name=​"busMerchPDD" class=​"resourceSize">​</select>

​
​​
​​
​

​

是否有一种方法可以遍历元素，并为每个元素添加每个选项？或者我需要为每个要修改的元素使用getElementId语句吗

function buildDropDowns(sizes) {
  var list = $('#busMerchPlan');
  list.empty();
  for (var i=0; i<options.length; i++) {
    list.append('<option value="' + options[i] + '">' + options[i] + '</option>');
  }

  var list = $('#busMerchAlloc');
  list.empty();
  for (var i=0; i<options.length; i++) {
    list.append('<option value="' + options[i] + '">' + options[i] + '</option>');
  }

  var list = $('#busMerchBuy');
  list.empty();
  for (var i=0; i<options.length; i++) {
    list.append('<option value="' + options[i] + '">' + options[i] + '</option>');
  }

  var list = $('#busMerchPDD');
  list.empty();
  for (var i=0; i<options.length; i++) {
    list.append('<option value="' + options[i] + '">' + options[i] + '</option>');
  }
}

函数构建下拉列表（大小）{
变量列表=$（'busMerchPlan'）；
list.empty（）；
对于（var i=0；i
未捕获的TypeError:未能对“HTMLOptionsCollection”执行“add”：提供的值不是类型“（HTMLOptionElement或HTMLOptGroupElement）”的值

错误消息建议您添加一个值，该值可以是
HTMLOptionElement
或
HTMLOptGroupElement
。因此，您可以编写一个函数来创建这样的元素：

function createOption(option, label) {
      var option = document.createElement("option");
      option.setAttribute("value", option);
      option.innerHTML = label;

      return option;
}

并在您的
选择[i].options.add
函数中调用它


函数构建下拉列表（大小）{
var selections=document.getElementsByClassName（'resourceSize'）；
对于jQuery的（var i=0；i3行。在创建第一行
后运行它们。不要复制和粘贴，您必须更改
#id
。详细信息在演示中注释

演示

//main中的每个选项。。。
$（“#主选项”）。每个（函数（）{
//…获取此选项并将其复制并存储在变量中。
让dupe=$（this.clone（）；
/*查找#main之后的所有兄弟选择并添加该选项
||每个选项的副本
*/
$（'#main'）.nextAll（'select'）.append（dupe）；
})；
选择{
显示：内联块；
字体：继承；
宽度：24%
}

ZER0
0NE
两个
三
四









或者只使用本机代码新选项（标签[，值]）

更简约的方法（可能更容易理解）


var selects=document.getElementsByClassName（'resourceSize'）；
变量大小=[“XXL”、“XL”、“L”、“M”、“S”、“XS”]；
对于（变量i=0；i


非常感谢。我添加了createOption函数，该函数在迭代过程中被调用，并按预期工作。我唯一做的更改是对parm列表的更改。我将parm更改为option_s_，而不是函数中的parm和声明变量。谢谢！是的，这甚至是正确的更好。完全忘了那个选项构造函数。
<select id=​"busMerchPlan" name=​"busMerchPlan" class=​"resourceSize">​</select>
<select id=​"busMerchAlloc" name=​"busMerchAlloc" class=​"resourceSize">​</select>​
<select id=​"busMerchBuy" name=​"busMerchBuy" class=​"resourceSize">​</select>​
<select id=​"busMerchPDD" name=​"busMerchPDD" class=​"resourceSize">​</select>

function buildDropDowns(sizes) {
  var list = $('#busMerchPlan');
  list.empty();
  for (var i=0; i<options.length; i++) {
    list.append('<option value="' + options[i] + '">' + options[i] + '</option>');
  }

  var list = $('#busMerchAlloc');
  list.empty();
  for (var i=0; i<options.length; i++) {
    list.append('<option value="' + options[i] + '">' + options[i] + '</option>');
  }

  var list = $('#busMerchBuy');
  list.empty();
  for (var i=0; i<options.length; i++) {
    list.append('<option value="' + options[i] + '">' + options[i] + '</option>');
  }

  var list = $('#busMerchPDD');
  list.empty();
  for (var i=0; i<options.length; i++) {
    list.append('<option value="' + options[i] + '">' + options[i] + '</option>');
  }
}

function createOption(option, label) {
      var option = document.createElement("option");
      option.setAttribute("value", option);
      option.innerHTML = label;

      return option;
}