向多个Select元素添加选项

Question

我有一个HTML页面，包括一个带有多个<select>元素的表单。 我知道如何将元素加载到单个<select> ; 这是一段代码，可以按照我的预期运行：

$(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>');
    }
  }

它正确获取项目列表，并将选项添加到<select> 。

现在我要做的是向多个<select>元素添加一个选项列表（全部相同）。

这是我编写的代码：

$(function() {
    google.script.run.withSuccessHandler(buildDropDowns)
    .getDropDowns();
  });

function buildDropDowns(sizes) {
    var selections = document.getElementsByClassName('resourceSize');
    for(var i=0; i<selections.length; i++) {
      console.log(selection);
      for(var j= 0; j<sizes.length; j++) {
        selections[i].options.add(sizes[j], sizes[j]);
      }
    }
  }

function buildDropDowns(sizes) {
    var selections = document.getElementsByClassName('resourceSize');
    for(var i=0; i<selections.length; i++) {
      var selection = selections[i];
      console.log(selection);
      for(var j= 0; j<sizes.length; j++) {
        selection.options.add(sizes[j], sizes[j]);
      }
    }
  }

我也试过它，我在迭代时为每个元素创建一个新变量：

function buildDropDowns(sizes) {
  var selections = document.getElementsByClassName('resourceSize');
  for(var i=0; i<selections.length; i++) {
    var selection = selections[i];
    console.log(selection);
    for(var j= 0; j<sizes.length; j++) {
      selection.options.add(sizes[j], sizes[j]);
    }
  }
}

无论哪种情况，这都是我在控制台中遇到的错误：

Uncaught TypeError: Failed to execute 'add' on 'HTMLOptionsCollection':
The provided value is not of type '(HTMLOptionElement or HTMLOptGroupElement)'

基于我已经完成的一些搜索，我尝试了几个不同的东西，但无论我尝试什么，我都会得到相同的错误信息。 我假设它与getElementById和getElementsByClassName之间的区别有关。 一个返回元素本身，另一个返回元素数组。 但我认为我应该能够遍历该数组，并使用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>');
  }
}

我可以做到这一点，但最后，我将有20多个<select>元素，并且必须有比蛮力更好的方法。

Answer 1

未捕获的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;
}

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

 function buildDropDowns(sizes) { var selections = document.getElementsByClassName('resourceSize'); for(var i=0; i<selections.length; i++) { //console.log(selection); for(var j= 0; j<sizes.length; j++) { selections[i].options.add(createOption(sizes[j], sizes[j])); } } } function createOption(option, label) { var option = document.createElement("option"); option.setAttribute("value", option); option.innerHTML = label; return option; } var sizes = ["XXL", "XL", "L", "M", "S", "XS"]; buildDropDowns(sizes); 

 <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> 

Answer 2

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

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

 var selects = document.getElementsByClassName('resourceSize'); var sizes = ["XXL", "XL", "L", "M", "S", "XS"]; for( var i = 0; i < selects.length; i++ ) { for( var id in sizes ) { selects[i].options.add( new Option( sizes[id], id )); } } 

 <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> 

Answer 3

3行jQuery。 在创建第一个<select>后运行它们。 不要复制和粘贴，你必须改变#id 。 详情在演示中评论。

演示

 // Each option in #main... $('#main option').each(function() { // ...get this option and copy it and store it in a variable. let dupe = $(this).clone(); /* Find all sibling selects that come after #main and add that || copy of option to each one */ $('#main').nextAll('select').append(dupe); }); 

 select { display: inline-block; font: inherit; width: 24% } 

 <select id='main' name='main' class='options'> <option value=""></option> <option value="0">ZER0</option> <option value="1">0NE</option> <option value="2">TWO</option> <option value="3">THREE</option> <option value="4">FOUR</option> </select> <br><br> <select id='select0' name='select0' class='options'></select> <select id='select1' name='select1' class='options'></select> <select id='select2' name='select2' class='options'></select> <select id='select3' name='select3' class='options'></select><br> <select id='select4' name='select4' class='options'></select> <select id='select5' name='select5' class='options'></select> <select id='select6' name='select6' class='options'></select> <select id='select7' name='select7' class='options'></select><br> <select id='select8' name='select8' class='options'></select> <select id='select9' name='select9' class='options'></select> <select id='selectA' name='selectA' class='options'></select> <select id='selectB' name='selectB' class='options'></select><br> <select id='selectC' name='selectC' class='options'></select> <select id='selectD' name='selectD' class='options'></select> <select id='selectE' name='selectE' class='options'></select> <select id='selectF' name='selectF' class='options'></select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>