如何获取动态创建的下拉列表的值？

Question

我在我的 DOM 中实例化了一个用户列表，然后将他们的名字绑定到下拉列表中。因此，它们在页面加载之前不会被创建。我在尝试定位标签<option>并访问它的值时遇到问题。

JS DOM 函数

  let userDropDownList = userInstantiation.reduce((usersHTML, user) => {

    usersHTML += `<option class="nav__div__one__dropdown__choice" value="${user.id}">${user.name}</option>`

    return usersHTML;

  }, '')

  navDivDropdown.innerHTML = userDropDownList

}

我试图遍历标签<option>，但我返回的是一个空数组。我的包装纸index.html是<select class="nav__div__one__dropdown" name="users"></select>

我正在尝试获取该值，以便我可以将 user.id 绑定到 User 实例并访问这些类方法。任何提示将非常感谢！

Answer 1

您onchange可以像这样在选择输入上使用事件来做到这一点：<select onchange="changed(this)"></select>function changed(option){&nbsp;console.log(option.value);}这是一个工作片段let userInstantiation = [{id: 1, name: 'user1'},{id: 2, name: 'user2'}];let userDropDownList = userInstantiation.reduce((usersHTML, user) =>&nbsp; &nbsp; usersHTML +=&nbsp;&nbsp; &nbsp; `<option class="nav__div__one__dropdown__choice" value="${user.id}">${user.name}</option>`&nbsp; , '')&nbsp; document.querySelector(".nav__div__one__dropdown").innerHTML = userDropDownList;&nbsp;&nbsp;function changed(option){&nbsp;console.log(option.value);}<select class="nav__div__one__dropdown" onchange="changed(this)" name="users"></select>

Answer 2

你会这样去做document.querySelector('nav__div__one__dropdown').addEventListner('change',(e)=>{&nbsp; const userId=e.target.value;&nbsp;&nbsp; //here do your user tying logic&nbsp;})