Question

How can I dynamically set the options from my html select field with Javascript?
This is my page setup:

<form name="test">
  <table>
    <tr>
      <td class='dataleft'>Product: </td>
      <td><select name='inptProduct'></select></td>
    </tr>
  </table>
</form>

I have all values in an array. This is the location to set the <option>s.

for(var i = 0; i < productArray.length; i++) {
    console.log("<option value='" + productArray[i] + "'>" + productArray[i] + "</option>");
}

PS: jQuery can be used.

---

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

var optionsAsString = "";
for(var i = 0; i < productArray.length; i++) {
    optionsAsString += "<option value='" + productArray[i] + "'>" + productArray[i] + "</option>";
}
$("select[name='inptProduct']").find('option').remove().end().append($(optionsAsString));

Answer 1

wellyou have almost done it all:

var optionsAsString = "";
for(var i = 0; i < productArray.length; i++) {
    optionsAsString += "<option value='" + productArray[i] + "'>" + productArray[i] + "</option>";
}
$( 'select[name="inptProduct"]' ).append( optionsAsString );

EDIT removed $ wrapper around last optionsAsString as append automatically converts strings