Javascript 如何解决Appenshild下拉列表不显示问题

在尝试弄清楚如何使用appenchild在Javascript上获得下拉列表之后。我能够做到这一点，但现在的问题是，数据要么在我使用“单击”事件侦听器时重复，要么在调用函数时不显示任何内容。但是，当我在控制台中调用该函数时，它正在工作，显示我希望显示的下拉列表。如何使它在代码中工作而不在控制台中调用它

首先，这里是我在事件侦听器“click”中调用的表单和函数：

    function addTrackForm() {
    let trackForm = document.getElementById('track-form')
    let html = `
        <h3>Add Song</h3>
        <form>
            <label>Title:</label>
            <input type='text' id='title'>
            <label>Artist:</label>
            <input type='text' id='artist'>
            <label>Genre:</label>
            <input type='text' id='genre'>
            <label>Playlist:</label>
            <select id='menu' class='playlist-dropdown'>
            </select>
            <input type='submit'>
        </form>
    `
    trackForm.innerHTML = html
    
    openMenu()
    // document.getElementById('menu').addEventListener('click', openMenu)
    document.querySelector('form').addEventListener('submit', createTrack)
}

function openMenu() {
    let all = Playlist.all;
 
  let select = document.querySelector("#menu");
  select.name = Playlist.name;
 
  for (const val of all) {
    let option = document.createElement("option");
    option.value = val.name;
    option.text = val.name.charAt(0).toUpperCase() + val.name.slice(1);
    select.append(option);
  }
}

有人能帮我弄清楚这是怎么回事吗？请给出建议。

让我们试试：

改变

  let option = document.createElement("menu");

到

---

谢谢你的回答。我试过了，当我点击debugger时，似乎是一个很好的更正，现在看起来它实际上将返回一个数组<代码>for（const val of all）{let option=document.createElement（“option”）；option.value=val；//option.text=val.charAt（0）.toUpperCase（）+val.slice（1）；调试器select.appendChild（val）但是，我仍然返回相同的错误。是否还有其他代码可以查看？可能是您需要将appendChild替换为append。现在没有收到错误。但是，什么都没有发生。我在运行openMenu函数的事件侦听器前面放置了一个调试器，它返回“undefined”。还有其他建议吗？你能把你的代码放到吗？这样，我就可以理解整个画面了。顺便问一下，当用户单击下拉框时，你想刷新下拉选项吗？

  let option = document.createElement("menu");

 let option = document.createElement("option");