如何獲取動態創建的下拉列表的值？

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){
 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 
})