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

Question

我试图创建一些JavaScript，只需单击一个按钮，即可添加一个填充有选项的标签。 这些选项将使用名为“名册”的数组进行定义。 我想看到的是一个下拉菜单，其中包含桑切斯，罗纳尔多和厄齐尔的选项。

 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 ），请参阅此处了解原因。

最后，通常最好使用DOM API调用document.createElement()创建动态元素，而不是构建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向选项标签添加选项？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-06-25 16:12:27

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-06-25 16:12:27

解决方案1
0 已采纳 2017-06-25 16:12:27