title: Dynamically set select-options with JavaScript
body: <p>How can I dynamically set the options from my html select field with Javascript?
  This is my page setup:</p>
  
  <pre><code>&lt;form name="test"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td class='dataleft'&gt;Product: &lt;/td&gt;
        &lt;td&gt;&lt;select name='inptProduct'&gt;&lt;/select&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I have all values in an array. This is the location to set the <code>&lt;option&gt;</code>s.</p>
  
  <pre><code>for(var i = 0; i &lt; productArray.length; i++) {
      console.log("&lt;option value='" + productArray[i] + "'&gt;" + productArray[i] + "&lt;/option&gt;");
  }
  </code></pre>
  
  <p>PS: jQuery can be used.</p>
  
  <hr>
  
  <p><strong>Solution:</strong>
  This is the final solution I was looking for. It does not apply the new options to the select field. It removes all first, and then adds the new ones:</p>
  
  <pre><code>var optionsAsString = "";
  for(var i = 0; i &lt; productArray.length; i++) {
      optionsAsString += "&lt;option value='" + productArray[i] + "'&gt;" + productArray[i] + "&lt;/option&gt;";
  }
  $("select[name='inptProduct']").find('option').remove().end().append($(optionsAsString));
  </code></pre>