title: Adding options to multiple Select elements
body: <p>I have an HTML page, including a Form with multiple <code>&lt;select&gt;</code> elements.  I know how to load the elements into a single <code>&lt;select&gt;</code>; here’s a piece of the code that works as I expect it to:</p>
  
  <pre><code>$(function() {
      google.script.run.withSuccessHandler(buildProjectList)
      .getProjects();
    });
  
    function buildProjectList(options) {
      var list = $('#projectList');
      list.empty();
      for (var i=0; i&lt;options.length; i++) {
        list.append('&lt;option value="' + options[i] + '"&gt;' + options[i] + '&lt;/option&gt;');
      }
    }
  </code></pre>
  
  <p>It correctly gets a list of Projects, and adds the Options to the <code>&lt;select&gt;</code>.</p>
  
  <p>Now what I am trying to do is add a list of options (all the same) to multiple <code>&lt;select&gt;</code> elements.</p>
  
  <p>Here’s the code as I’ve written it:</p>
  
  <pre><code>$(function() {
      google.script.run.withSuccessHandler(buildDropDowns)
      .getDropDowns();
    });
  
  function buildDropDowns(sizes) {
      var selections = document.getElementsByClassName('resourceSize');
      for(var i=0; i&lt;selections.length; i++) {
        console.log(selection);
        for(var j= 0; j&lt;sizes.length; j++) {
          selections[i].options.add(sizes[j], sizes[j]);
        }
      }
    }
  
  function buildDropDowns(sizes) {
      var selections = document.getElementsByClassName('resourceSize');
      for(var i=0; i&lt;selections.length; i++) {
        var selection = selections[i];
        console.log(selection);
        for(var j= 0; j&lt;sizes.length; j++) {
          selection.options.add(sizes[j], sizes[j]);
        }
      }
    }
  </code></pre>
  
  <p>I’ve also tried it where I create a new variable for each element as it iterates through:</p>
  
  <pre><code>function buildDropDowns(sizes) {
    var selections = document.getElementsByClassName('resourceSize');
    for(var i=0; i&lt;selections.length; i++) {
      var selection = selections[i];
      console.log(selection);
      for(var j= 0; j&lt;sizes.length; j++) {
        selection.options.add(sizes[j], sizes[j]);
      }
    }
  }
  </code></pre>
  
  <p>In either case, this is the error I’m getting in the console:</p>
  
  <pre><code>Uncaught TypeError: Failed to execute 'add' on 'HTMLOptionsCollection':
  The provided value is not of type '(HTMLOptionElement or HTMLOptGroupElement)'
  </code></pre>
  
  <p>I’ve tried a couple different things based on some searching I’ve done, but no matter what I try, I’m getting the same error message.  I’m assuming it has something to do with the difference between getElementById and getElementsByClassName.  One returns the element itself, the other an array of elements.  But I would think that I should be able to iterate through that array, and use the add function.</p>
  
  <p>I can see that the iteration is working; here is what console.log(selection) shows as it cycles through each element:</p>
  
  <pre><code>&lt;select id=​"busMerchPlan" name=​"busMerchPlan" class=​"resourceSize"&gt;​&lt;/select&gt;
  &lt;select id=​"busMerchAlloc" name=​"busMerchAlloc" class=​"resourceSize"&gt;​&lt;/select&gt;​
  &lt;select id=​"busMerchBuy" name=​"busMerchBuy" class=​"resourceSize"&gt;​&lt;/select&gt;​
  &lt;select id=​"busMerchPDD" name=​"busMerchPDD" class=​"resourceSize"&gt;​&lt;/select&gt;
  </code></pre>
  
  <p>​</p>
  
  <p>Is there a way to iterate through the elements, and for each element, add each of the Options?  Or do I need to use a getElementId statement for each of the elements I want to modify?</p>
  
  <pre><code>function buildDropDowns(sizes) {
    var list = $('#busMerchPlan');
    list.empty();
    for (var i=0; i&lt;options.length; i++) {
      list.append('&lt;option value="' + options[i] + '"&gt;' + options[i] + '&lt;/option&gt;');
    }
  
    var list = $('#busMerchAlloc');
    list.empty();
    for (var i=0; i&lt;options.length; i++) {
      list.append('&lt;option value="' + options[i] + '"&gt;' + options[i] + '&lt;/option&gt;');
    }
  
    var list = $('#busMerchBuy');
    list.empty();
    for (var i=0; i&lt;options.length; i++) {
      list.append('&lt;option value="' + options[i] + '"&gt;' + options[i] + '&lt;/option&gt;');
    }
  
    var list = $('#busMerchPDD');
    list.empty();
    for (var i=0; i&lt;options.length; i++) {
      list.append('&lt;option value="' + options[i] + '"&gt;' + options[i] + '&lt;/option&gt;');
    }
  }
  </code></pre>
  
  <p>I can do that, but in the end, I'll have 20+ <code>&lt;select&gt;</code> elements, and there has to be a better way than brute force.</p>