如何获得动态创建的下拉列表的价值?

制造商

我实例化了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实例并访问这些类方法。任何提示将非常感谢!

阿萨夫

您可以使用onchangeselect输入上的event来做到这一点,如下所示:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章