如何使用 javascript 和 bootstrap 将项目添加到下拉列表

Question

我已经获取了当前日期时间的所有区域，并且我想将所有这些 387 个区域添加到我的引导程序下拉列表中。 基本上如何使用javascript将项目添加到引导下拉列表。 这是基本的html代码：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Answer 1

你可以做这样的事情，确保区域不是用户输入，因为这会添加 html。

const div = document.querySelector('.dropdown-menu');
const regions = ['Europe', 'America'];
regions.forEach(region => {
    div.innerHTML += `<a class="dropdown-item" href="#">${region}</a>`;
})

Answer 2

通过使用createElement创建Element对象并利用appendChild将其插入到父div.dropdown-menu下的 DOM 中，在 JavaScript 中使用适当的 DOM 管理：

 function addItems() { var numberOfItems = 5; for (var i = 0; i<numberOfItems; i++) { var ele = document.createElement("a"); ele.classList = "dropdown-item"; ele.href = "#"; ele.innerText = "" + i; document.querySelector(".dropdown-menu").appendChild(ele); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> <button class="btn btn-secondary" type="button" onclick="addItems()">Add List Items</button> </div>

为了清楚起见，您必须修改此示例以适合您独立获取的数据的结构。 由于您没有添加任何有关您当前如何接收数据的信息，因此无法针对您的特定情况定制解决方案。

Answer 3

这是我的解决方案

 function func() { /*storing item names in an array*/ var region=['region1','region2','region3','region4','etc']; for(var i=0; i<region.length; i++){ var item = document.createElement("a"); item.setAttribute("class","dropdown-item"); item.href = "#"; var node = document.createTextNode(region[i]); /*fetching name of the items*/ item.appendChild(node); document.getElementsByClassName('dropdown-menu')[0].appendChild(item); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> <button class="btn btn-secondary" type="button" onclick="func()"> Add Items </button> </div>