Question

我正在尝试创建一些JavaScript，只需单击一个按钮，就会添加一个填充了选项的标记。选项将使用名为“roster”的数组定义。我希望看到的是一个可以选择桑切斯，罗纳尔多和厄齐尔的下拉列表。

var roster = [
  "ozil",
  "sanchez",
  "ronaldo"
];

var reps = null;
var dropdown = null;
var scorerOption = "<option value='" + reps + "' class='scorerOption'>" + roster[reps] + "</option>";

function makeDropdown () {
  dropdown = "<select class='scorer'>" + String(scorerOption).repeat(roster.length) + "</select>";
  document.getElementById("rawr").innerHTML = dropdown;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <p id="rawr"><button onclick="makeDropdown()">Select a player</button></p>
</body>
</html>

正如您可能注意到的那样，和标签出现了，但都有innerHTML和值“undefined”。我怎样才能更改它，以便显示名称sanchez，ronaldo和ozil？

Answer 1

您需要循环遍历数组，并为数组中的每个元素创建并插入新的option。

您也不应该使用内联HTML事件处理属性（onclick），请参阅 here 了解原因。

最后，使用document.createElement()的DOM API调用创建动态元素通常更好，而不是构建HTML字符串，因为字符串可能变得难以管理，DOM API提供了一种干净的面向对象的方式配置新创建的元素。

var roster = [
  "ozil",
  "sanchez",
  "ronaldo"
];

// Work with your DOM elements in JavaScript, not HTML
var btn = document.getElementById("btn");
btn.addEventListener("click", makeDropdown);

function makeDropdown () {
  // Dynamically generate a new <select> element as an object in memory
  var list = document.createElement("select");
  
  // Configure the CSS class for the element
  list.classList.add("scorer");
  
  // Loop over each of the array elements
  roster.forEach(function(item){
    // Dynamically create and configure an <option> for each
    var opt = document.createElement("option");
    opt.classList.add("scorerOption");
    opt.textContent = item;
    // Add the <option> to the <select>
    list.appendChild(opt);
  });

  // Add the <select> to the document
  document.getElementById("rawr").appendChild(list);
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <p id="rawr"><button id="btn">Select a player</button></p>
</body>
</html>

如何使用JavaScript向select标签添加选项？

1 个答案: