Populate array elements in dropdown list using javascript

Question

I am trying to add array elements to dropdownlist using javascript and refered the following links but it did not work:

Code :

var itemArray=new Array();
var ddlItems=document.getElementById("ddlitemslist").value;
itemArray=["a","b","c"];

for(var i=0;i<itemArray.length;i++)
{
    var opt = itemArray[i];
    var el = document.createElement("option");

    el.textContent = opt;
    el.value = opt;

    ddlItems.option.value=el; /*throws error that 'option' is not part of function*/
}

kind user · Answer 1 · 2017-03-21T15:29:57.337

If you assign an array to variable, you don't have to init it with new Array(), because you will just overwrite it.

By using new Array() you have created a new, empty array. Then you have basically overwrited it with a different array - itemArray = ["a","b","c"]

If you want to push the dynamically created options to the ddlItems element, use appendChild.

Note: In your particular case, if you want to catch the this select from the DOM, use just document.getElementById() without .value, because we are going to reference to its other attributes, not value itself.

var ddlItems = document.getElementById("ddlitemslist"),
    itemArray = ["a", "b", "c"];
    
    for (var i = 0; i < itemArray.length; i++) {
      var opt = itemArray[i];
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      ddlItems.appendChild(el);
    }

<select id='ddlitemslist'></select>

The main problem doesn't come from the array initialisation... it's just an extra line that doesn't break the code buts better to remove it. — Zakaria Acharki, Mar 21 '17 at 15:27
@ZakariaAcharki Isn't it clearly visible in the code snippet? Anyways - I've noted it (: — kind user, Mar 21 '17 at 15:31

Zakaria Acharki · Answer 2 · 2017-03-21T15:54:32.560

throws error that 'option' is not part of function

The error you get explain it self, you're trying to call .option.value on ddlitemslist value and not on the object.

You should not return the value in the initialisation of ddlItems variable but the object instead, like :

var ddlItems=document.getElementById("ddlitemslist").value;

Should be :

var ddlItems=document.getElementById("ddlitemslist");

NOTE : No need for var itemArray=new Array();.

Hope this helps.

var itemArray=new Array(); //You could remove this line
var ddlItems = document.getElementById("ddlitemslist"),
itemArray = ["a", "b", "c"];

for (var i = 0; i < itemArray.length; i++) {
  var opt = itemArray[i];
  var el = document.createElement("option");

  el.textContent = opt;
  el.value = opt;

  ddlItems.appendChild(el);
}

<select id='ddlitemslist'></select>

score 0 · Answer 3 · answered Mar 21 '17 at 15:24

You have to select select element and then while iterating over array create option elements as children of select element.

You need to replace

var ddlItems=document.getElementById("ddlitemslist").value;

with

var ddlItems=document.getElementById("ddlitemslist");

Populate array elements in dropdown list using javascript

3 Answers3