Question

谁能告诉我如何从数组填充此下拉列表？？？

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

Answer 1

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>

Answer 2

您可以使用

遍历数组中的所有项目以使用当前项目创建 li 元素

Document.createElement()

在HTML文档中，ParentNode.append方法创建由tagName或 HTMLUnknownElement 指定的HTML元素（如果无法识别tagName）。

和ParentNode.append()

var data = ['first', 'second']; data.forEach(function(item){ var li = document.createElement('li'); li.textContent = item; document.getElementById('list').append(li) });方法在 ParentNode 的最后一个子项之后插入一组 Node 对象或 DOMString 对象。 DOMString 对象作为等效的Text节点插入。

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

Last login: Thu Nov 15 16:21:24 on ttys000
MacBooks-MacBook-Pro:~ macbook$ /Users/macbook/Desktop/CodeBlocks.app/Contents/MacOS/cb_console_runner DYLD_LIBRARY_PATH=$DYLD_LIBRARY_PATH:. /Users/macbook/CodeBlocksProject/Backtracking Test/bin/Debug/Backtracking Test 
sh: /Users/macbook/CodeBlocksProject/Backtracking: No such file or directory

Process returned 127 (0x7F)   execution time : 0.008 s
Press ENTER to continue.

在JavaScript中从数组填充下拉列表

2 个答案: