Question

我有一个HTML页面，其中包括带有多个<select>元素的Form。我知道如何将元素加载到单个<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（selection）在每个元素之间循环显示的内容：

<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

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

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

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>

将选项添加到多个“选择”元素

3 个答案:

演示