问使用map.set创建和填充select元素，该元素将显示键值作为警报Javascript。
EN

Stack Overflow用户

提问于 2022-09-04 02:52:13

回答 1查看 33关注 0票数 0

我是新来的，我不确定我是否完全理解这项任务，所以任何反馈或建议都将不胜感激。

我正在尝试创建一个简单的select元素，它将使用一个映射数组来填充。

当选择下拉列表中的名称时，将弹出带有相应值的警报。

以下是我到目前为止所拥有的：

const studentMap = new Map();

studentMap.set("Dave", 89);
studentMap.set("Angela", 88);
studentMap.set("Luke", 97);
studentMap.set("Holly", 95);
studentMap.set("Ziggy", 89);

function dropDownGrades() {

    let select = document.createElement("SELECT");
    select.setAttribute("id", "mySelect");
    dropDownGradeBox.appendChild(select);

    for (let i = 0; i < studentMap.length; i++) {
        let names = studentMap.set(key);
        let newOption = document.createElement("option");
        newOption.setAttribute("id", "nameOptions");
        let textNode = document.createTextNode(names);
        newOption.appendChild(textNode);
        select.appendChild(newOption);
    }
}

以及HTML：

<head>

    <script type="text/Javascript" src="task2.js"></script>

</head>

<body onload = "dropDownGrades()"> 
<h1> Task 11 - Name and Grades</h1>
<p> Below is the dropdown list of names and, when clicked on, it should hopefully display an alert 
    box with the respective grade
</p>
<div id="dropDownGradeBox" onchange="studentGrade()"></div>
</body>

谢谢

javascript

arrays

drop-down-menu

alert

电商出海AIGC福利包

嘿！这里有一份电商AIGC福利包等你查收！【电商素材提效】【物料本土化】超多AIGC能力免费送！快点击参与吧！

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-04 03:52:37

我希望这段代码和我的评论能对你的学习有所帮助。请学习每一行对你来说都不清楚。您还应该更多地注意代码对齐、变量和函数名。

// Constants
const dropDownGradeBox = document.getElementById("dropDownGradeBox");

// Lets incapsulate Map initialization
// Anonymous function declaration + call
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
const studentMap = (function () {
  const map = new Map();
  map.set("Dave", 89);
  map.set("Angela", 88);
  map.set("Luke", 97);
  map.set("Holly", 95);
  map.set("Ziggy", 89);
  return map;
})();
// !Constants

// Naming changes
function Initialize() {
  const select = document.createElement("SELECT");
  select.setAttribute("id", "students-list");
  select.setAttribute("name", "students-list");
  select.onchange = onStudentsSelectChange;

  // Map objects can be iterated using for..of
  // where the item for each iteration is an array of [key, value]
  // You can see "Array destructuring" to extract key value from array
  // without need to use
  // "const item of studentMap" + "const key = item[0]" + "const value = item[1]"
  // but actually value is not used so it can be "const [key] of studentMap"
  for (const [key] of studentMap) {
    let newOption = document.createElement("option");
    // "value" attribute now holds a "key" of our map, which is a name of student.
    newOption.setAttribute("value", key);
    newOption.text = key;
    select.appendChild(newOption);
  }

  // <select> element is now prepared and holds all the options.
  dropDownGradeBox.appendChild(select);
}

// Naming!
function onStudentsSelectChange(e) {
  // "e.target.value" holds the "key" of the Map we used
  const selectedName = e.target.value;
  // studentsMap is "global" and we can get data from it by key
  // You can also extend Map Data to hold objects, not only "grade" values.
  // like map.set("Dave", {grade: 89, age: 22});
  const studentData = studentMap.get(selectedName);
  console.log(selectedName, studentData);
  // "String Interpolation"
  alert(`${selectedName}: ${studentData}`);
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body onload="Initialize()">
    <h1>Task 11 - Name and Grades</h1>
    <p>
      Below is the dropdown list of names and, when clicked on, it should
      hopefully display an alert box with the respective grade
    </p>
    <div id="dropDownGradeBox"></div>
  </body>
</html>