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

stackoverflow.com/questions/170986/…

user800014
– user800014

2012-04-20 13:41:15 +00:00
Commented Apr 20, 2012 at 13:41 — user800014
– user800014, Commented Apr 20, 2012 at 13:41
stackoverflow.com/questions/47824/…

AbiusX
– AbiusX

2015-02-20 01:27:13 +00:00
Commented Feb 20, 2015 at 1:27 — AbiusX
– AbiusX, Commented Feb 20, 2015 at 1:27

gotofritz · Accepted Answer · 2013-06-24 20:01:30Z

49

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, 2013 at 20:01

answered Apr 20, 2012 at 13:43

gotofritz

3,3912 gold badges33 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

csharpfolk Over a year ago

@vemv again - maybe its time to create a function that do this

Kamal Bunkar Over a year ago

best answer, simple & easy.

hunter · Accepted Answer · 2012-04-20 13:42:12Z

27

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

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

answered Apr 20, 2012 at 13:42

hunter

63.7k19 gold badges115 silver badges115 bronze badges

5 Comments

gotofritz Over a year ago

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.

hunter Over a year ago

what makes you think this doesn't do that?

gotofritz Over a year ago

you are running .append for every member of the productArray

nimrod Over a year ago

Thanks for this hunter. Is there a function to replace all options, instead of appending them?

hunter Over a year ago

write $inputProduct.html("") before looping through to clear current options

Luke Stevenson · Accepted Answer · 2016-02-17 17:19:21Z

7

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>

answered Feb 17, 2016 at 17:19

Luke Stevenson

10.3k2 gold badges28 silver badges41 bronze badges

Comments

Matt · Accepted Answer · 2013-07-30 11:16:59Z

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, 2013 at 11:16

Matt

75.4k26 gold badges156 silver badges181 bronze badges

answered Jul 30, 2013 at 11:04

Nagen Biswal.

353 bronze badges

Comments

programmerRaj · Accepted Answer · 2021-09-10 15:51:26Z

2

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>

answered Sep 10, 2021 at 15:51

programmerRaj

2,1783 gold badges12 silver badges25 bronze badges

Comments

Menuka Ishan · Accepted Answer · 2016-05-12 09:33:24Z

1

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.

answered May 12, 2016 at 9:33

Menuka Ishan

5,5644 gold badges55 silver badges70 bronze badges

Comments

Radacina · Accepted Answer · 2017-08-22 12:03:35Z

0

I usually do it like this:

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

answered Aug 22, 2017 at 12:03

Radacina

4416 silver badges10 bronze badges

Comments

ZERO · Accepted Answer · 2012-04-20 13:43:10Z

-5

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

answered Apr 20, 2012 at 13:43

ZERO

1333 bronze badges

2 Comments

gotofritz Over a year ago

First of all you don't need to set the id to access a node, secondly val does something completely different.

Joe Over a year ago

.val() will set the selected value of the select element.

Collectives™ on Stack Overflow

Dynamically set select-options with JavaScript

8 Answers 8

2 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related