为什么输入值显示在控制台中，但不显示在下拉框中？

Question

我构建了一个基本的报告程序，它接受用户的输入，将此输入添加到一系列添加到下拉列表的段落中。然后将选择添加到数组并打印在最终报告中。

Here is a JFiddle of the program。正如您将看到的，您的输入会打印在控制台中，但不会被拉到下拉列表中。你能帮我弄清楚为什么吗？

function populateSelects(dropDownConfig) {
    console.log(`I can get the student name here, but not in the dropdown box. Your name is ${studentName}.`);

for (let di = 0; di < dropDownConfig.length; di++) {
  for (let i = 0; i < dropDownConfig[di].categoryOptions.length; i++) {
    let opt = dropDownConfig[di].categoryOptions[i];

    let el = document.createElement("option");
    el.text = opt;
    el.value = opt;

    document.getElementById(dropDownConfig[di].id).add(el);
  }
}
}

该函数似乎可以正常工作，但不适用于 inputStudentName 的 studentName/the 值。

谢谢！

Answer 1

恕我直言，我已经稍微更改了您的代码以使其更短且更易读。我所做的主要更改是使用占位符文本而不是变量，并在创建选项时将其替换为 studentName。

let options= {
  progress: ['%NAME% has made excellent progress', '%NAME% has made good progress', '%NAME% has made poor progress'],
  behaviour: ['%NAME% has excellent behaviour', '%NAME% has good behaviour', '%NAME% has poor behaviour'],
  attendance: ['%NAME% has excellent attendance', '%NAME% has good attendance', '%NAME% has poor attendance'],
  punctuality: ['%NAME% has excellent punctuality', '%NAME% has good punctuality', '%NAME% has poor punctuality'],
  improvements: ['%NAME% should carry on as they have', '%NAME% could make some improvements', '%NAME% must improve']
}

let dropDownConfig = ["progress", "behaviour", "attendance", "punctuality", "improvements"];

function populateSelects(dropDownConfig) {
  dropDownConfig.forEach(config => {
    let select = document.querySelector(`#${config}Dropdown`);
    options[config].forEach(text => {
        let option = document.createElement("OPTION");
        text = text.replace("%NAME%", studentName);
        option.text = text;
        option.value = text;
        select.appendChild(option);
    })
  })
}

为什么输入值显示在控制台中，但不显示在下拉框中？

Why does the input value show in the console, but not in the dropdown boxes?

javascript

arrays

input

function

dropdown