Fill dropdown from array in javascript

Question

Can anyone tell me how to fill this dropdown from a array???

 <div class="dropdown" style="text-align:right">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="list" aria-labelledby="dropdownMenu1">


        </ul>
    </div>

Use JavaScript to go over the array and [createElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and then [appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) — Oram, Nov 15 '18 at 14:14
there are plentiful examples of this kind of thing online already if you search. I found [this one](https://stackoverflow.com/a/9895164/5947043) in about 10 seconds, for instance. There's very little need to ask this question, unless you have tried it already and are stuck for some reason - in which case, show your code and explain your problem, so it's a distinct issue and not just a duplicate of lots of earlier posts. — ADyson, Nov 15 '18 at 14:14
Is it asp.net web forms or mvc? What the framework do you use? — Viacheslav Yankov, Nov 15 '18 at 14:15
@YankovViacheslav how would that be relevant? The question says "In JavaScript" — ADyson, Nov 15 '18 at 14:16
I see you added c# in the tag, so where is your array variable coming from. is this from the C# end or from js? Because this looks like a pure javascript and HTML question — jidexl21, Nov 15 '18 at 14:17
@YankovViacheslav JS is tagged too. And lots of people use totally irrelevant tags in their questions, it's depressingly common. The actual text of the title says specifically they want it in JavaScript. I'd say that's more likely to be accurate. I won't discount the possibility, it's not like it's a very clear or good quality question in general. But we can only go with the information we've got, which strongly suggests JS is the approach desired. — ADyson, Nov 15 '18 at 14:19
Possible duplicate of [JavaScript - populate drop down list with array](https://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array) — ADyson, Nov 15 '18 at 14:20

score 1 · Answer 1 · answered Nov 15 '18 at 14:20

var arr = [ "one", "two", "three", "four", "five" ];

for (var i=0; i<arr.length; i++) {
  var node = document.createElement("li");
  var textnode = document.createTextNode(arr[i]);

  node.appendChild(textnode);
  document.getElementById("List").appendChild(node);
}

<ul id="List">
</ul>

Mamun · Answer 2 · 2018-11-15T14:34:34.510

You can loop through all the item in the array to create li element with current item using

Document.createElement()

In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.

and ParentNode.append()

The ParentNode.append method inserts a set of Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as equivalent Text nodes.

var data = ['first', 'second'];
data.forEach(function(item){
  var li = document.createElement('li');
  li.textContent = item;
  document.getElementById('list').append(li)
});

<div class="dropdown" >
  <ul class="dropdown-menu" id="list" aria-labelledby="dropdownMenu1">


  </ul>
</div>

Fill dropdown from array in javascript

2 Answers2