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

Question

我构建了一个接受用户输入的基本报告程序，将此输入添加到一系列添加到下拉列表的段落中。然后将选择添加到数组中并打印在最终报告中。这是该程序的 JFiddle。正如您将看到的，您的输入会打印在控制台中，但不会被拉到下拉列表中。你能帮我弄清楚为什么吗？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);  }}}该函数似乎可以正常工作，但不适用于 studentName/inputStudentName 的值。谢谢！

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);

    })

  })

}