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

Question

I've fetched the all regions for current date times and I want to add all of theese 387 regions to my bootstrap dropdown. Basically how to add items to bootstrap dropdowns using javascript. This is the basic html code:

<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

You could do something like this, make sure the regions are not of user input since this adds 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

Use proper DOM management in JavaScript by creating the Element object using createElement and leveraging appendChild to insert it into the DOM underneath your parent div.dropdown-menu :

 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>

Just to be clear, you'll have to adapt this example to fit the structure of the data you've sourced independently. It wasn't possible to tailor a solution to your specific situation since you didn't add any information about how you're currently receiving the data.

Answer 3

Here's my solution

 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>