Dynamically set select-options with JavaScript
javascript, jquery
Solution
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
Problem
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)); ```