按钮点击添加下拉小部件，从API获取
创始人
2024-11-03 22:32:45
0次

要实现按钮点击添加下拉小部件并从API获取数据的功能，您可以使用如下的代码示例：

HTML部分：

JavaScript部分：

// 定义按钮点击事件
document.getElementById("btn").addEventListener("click", function() {
  // 创建下拉小部件
  var dropdown = document.createElement("select");
  
  // 从API获取数据
  fetch("https://api.example.com/data") // 替换为实际的API地址
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      // 将获取的数据添加到下拉小部件中
      data.forEach(function(item) {
        var option = document.createElement("option");
        option.value = item.value;
        option.text = item.text;
        dropdown.appendChild(option);
      });
      
      // 将下拉小部件添加到容器中
      document.getElementById("dropdown-container").appendChild(dropdown);
    })
    .catch(function(error) {
      console.error("获取数据失败:", error);
    });
});

上述代码中，首先在HTML中定义了一个按钮和一个容器用于存放下拉小部件。然后，在JavaScript中，通过监听按钮的点击事件来触发添加下拉小部件的操作。在点击事件处理函数中，首先创建一个