我有一个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(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>元素，必须有比暴力更好的方法。