Dynamically set select-options with JavaScript

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));

http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery — , Apr 20 '12 at 13:41
http://stackoverflow.com/questions/47824/how-do-you-remove-all-the-options-of-a-select-box-and-then-add-one-option-and-se — AbiusX, Feb 20 '15 at 01:27

gotofritz · Accepted Answer · 2013-06-24T20:01:30.937

47

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

edited Jun 24 '13 at 20:01

answered Apr 20 '12 at 13:43

gotofritz

3,341
1
31
47

4

@vemv *again* - maybe its time to create a function that do this – csharpfolk Apr 11 '15 at 08:13
best answer, simple & easy. – Kamal Bunkar Feb 22 '19 at 11:59

score 27 · Answer 2 · answered Apr 20 '12 at 13:42

27

var $inputProduct = $("select[name='inputProduct']")

$(productArray).each(function(i, v){ 
    $inputProduct.append($("<option>", { value: v, html: v }));
});

answered Apr 20 '12 at 13:42

hunter

62,308
19
113
113

this will work - but adding the options in one go is more efficient. Not that it matters if it's just one pulldown in a page. – gotofritz Apr 20 '12 at 13:44
what makes you think this doesn't do that? – hunter Apr 20 '12 at 13:44
1

you are running .append for every member of the productArray – gotofritz Apr 20 '12 at 13:46
1

Thanks for this hunter. Is there a function to replace all options, instead of appending them? – nimrod Apr 20 '12 at 14:13
4

write `$inputProduct.html("")` before looping through to clear current options – hunter Apr 20 '12 at 15:02

score 6 · Answer 3 · answered Feb 17 '16 at 17:19

Assuming that the array productArray is a simple array, with each element being the value of the option, and the desired title for that option.

$( 'select[name="inptProduct"]' )
  .html( '<option>' + productArray.join( '</option><option>' ) + '</option>' );

Example:

productArray = ['One', 'Two', 'Three'];

// With the original code being

<select name="inptProduct">
  <option>There could be no options here</option>
  <option>Otherwise, any options here will be overwritten</option>
</select>

// Running the code above would output

<select name="inptProduct">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

score 3 · Answer 4 · edited Jul 30 '13 at 11:16

3

function onLoad() {

  var type = new Array("Saab","Volvo","BMW");

    var $select = $("select[name='XXXXXType']")
    alert($select);
    $(type).each(function(i, v){
        $select.append($("<option>", { value: v, html: v }));
      });

}

<select name="XXXXXType" id="XXXXXType"></select>

edited Jul 30 '13 at 11:16

Matt

74,352
26
153
180

answered Jul 30 '13 at 11:04

Nagen Biswal.

35
3

score 2 · Answer 5 · answered Sep 10 '21 at 15:51

Here is a solution for people who don't want to use jQuery:

const select = document.getElementById('select')

const arr = ['Apple', 'Pear', 'Orange']

arr.forEach(value => {
  const option = document.createElement('option')
  option.innerHTML = value
  select.appendChild(option)
})

<select id="select"></select>

score 1 · Answer 6 · answered May 12 '16 at 09:33

If you not insisting for pure JavaScript to do the job, you can easily done the job using jQuery.

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


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

Note that here I used the id of select tag. That's why I add the html part too. Hope you know how to add jQuery.

score 0 · Answer 7 · answered Aug 22 '17 at 12:03

0

I usually do it like this:

document.getElementById("selectid").innerHTML="<option value='foo'>FOO</option>";

answered Aug 22 '17 at 12:03

Radacina

431
5
10

score -5 · Answer 8 · answered Apr 20 '12 at 13:43

-5

you can set id for the select id=inptProduct Then do $('#inptProduct').val(yourselectValue)

answered Apr 20 '12 at 13:43

ZERO

133
3

First of all you don't need to set the id to access a node, secondly val does something completely different. – gotofritz Apr 20 '12 at 13:45
.val() will set the selected value of the select element. – Joe Apr 20 '12 at 13:51

Dynamically set select-options with JavaScript

8 Answers8

Linked