How to get value of dynamically created dropdown list?

Question

I instantiate a list of users in my DOM and then tie their name to the dropdown list. So they are not created until page load. I'm having trouble trying to target the <option> tag and access it's value.

JS DOM Function

  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
}

I've tried to loop through the <option> tags but I'm returning empty an array. My wrapper in my index.html is <select class="nav__div__one__dropdown" name="users"></select>

I'm attempting to get the value so that I can tye the user.id to the User instance and access those class methods. Any tips would be greatly appreciated!

Asaf · Accepted Answer · 2020-10-18 20:15:40Z

2

You can do it using onchange event on the select input like so:

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

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

Here is a working snippet

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>

answered Oct 18, 2020 at 20:15

Asaf

1,59211 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The code painter · Accepted Answer · 2020-10-18 20:20:53Z

1

you would go about it this way

document.querySelector('nav__div__one__dropdown').addEventListner('change',(e)=>{
  const userId=e.target.value; 
  //here do your user tying logic 
})

edited Oct 18, 2020 at 20:20

answered Oct 18, 2020 at 20:15

The code painter

1,7743 gold badges17 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to get value of dynamically created dropdown list?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related