时间戳

首页 > 解决方案 > 如何使用 vanilla JS 向下拉列表动态添加更多元素

javascript - 如何使用 vanilla JS 向下拉列表动态添加更多元素

问题描述

我不能使用 Jquery 或其他任何东西，只能使用 Vanilla Javascript。

我最初的方法是在全局范围内有一个数组来存储每个注册的项目，然后使用 foreach 将一个<option>子项附加到<select>，但显然这只会创建一个选项并重命名它

HTML

<label for="productList">Show Products</label>
<select name="products" id="productList">

</select>

JS

let productArray = [];
let dropdown = document.getElementById("productList");
dropdown.addEventListener("click", initializeList());

function initializeList(){
    //initializing with an example
    productArray.push("PROD1");
    productArray.push("PROD2");
    productArray.push("PROD3");

   productArray.forEach( item => {
   option = document.createElement("option");
   option.text = item;
   dropdown.appendChild(option)
   });
}

不幸的是，这不是一种非常有效的方法，因为每次我想添加一些东西时都必须手动创建一个变量。我将创建一个方法，您只需传递一个选项名称并将其添加到下拉选项中。似乎即使它是一个 forEach，添加的每个选项都是相同的。我怎样才能避免这种情况？

标签： javascripthtml

解决方案

设置时addEventListener，您需要发送函数本身，而不是return值。

在运行函数之前，您还需要测试是否select已经创建了列表。initializeList这样你只初始化一次。

let productArray = [];
let dropdown = document.getElementById("productList");
dropdown.addEventListener("click", initializeList); // send initializeList not initializeList()

function initializeList() {
  if (productArray.length != 0) { // Don't initialize more than once
    return;
  }
  //initializing with an example
  productArray.push("PROD1");
  productArray.push("PROD2");
  productArray.push("PROD3");

  productArray.forEach(item => {
    option = document.createElement("option");
    option.text = item;
    dropdown.appendChild(option)
  });
}
<label for="productList">Show Products</label>
<select name="products" id="productList">

</select>

推荐阅读