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

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 实例并访问那些 class 方法。任何提示将不胜感激！

Answer 1

您可以在 select 输入上使用 onchange 事件，如下所示：

<select onchange="changed(this)"></select>

function changed(option){
 console.log(option.value);
}

这是一个工作片段

let userInstantiation = [{id: 1, name: 'user1'},{id: 2, name: 'user2'}];
let userDropDownList = userInstantiation.reduce((usersHTML, user) =>
    usersHTML += 
    `<option class="nav__div__one__dropdown__choice" value="${user.id}">${user.name}</option>`
  , '')
  document.querySelector(".nav__div__one__dropdown").innerHTML = userDropDownList;
  
function changed(option){
 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)=>{
  const userId=e.target.value; 
  //here do your user tying logic 
})

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

How to get value of dynamically created dropdown list?

html

javascript

dom

dropdown