How can I create an option element using javascript and set it's value

Question

const currencies = [
  {
    id: 'USD', name: 'US Dollars'
  }, {
    id: 'UGX', name: 'Ugandan Shillings'
  }, {
    id: 'KES', name: 'Kenyan Shillings'
  }, {
    id: 'GHS', name: 'Ghanian Cedi'
  }, {
    id: 'ZAR', name: 'South African Rand'
  }
];

I have an issue with my code. I want to create an option element using javascript. I have done something like this below. What is my issue?

I want each item in the currencies arrays to populate into populateCurrencies function. And it should also create an option element. And also set it's value to the item id.

const populateCurrencies = () => {  

            var ans = document.getElementById('USD').value;
}

I want when users click an option and the value of what the user selected should show in the browser. — olorunfemi oludamilare, Feb 13 '19 at 17:14
Possible duplicate of [JavaScript - populate drop down list with array](https://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array) and [Filling out Combobox Using JSON value](https://stackoverflow.com/questions/19560054) — adiga, Feb 13 '19 at 17:16

score 0 · Answer 1 · answered Feb 13 '19 at 17:18

it has to do with DOM manipulation;

currencies.forEach((x)=>{
let selectElt = document.querySelector('.select-text');
let newElt = document.createElement('option');
let newText = document.createTextNode(x.name);
newElt.setAttribute('value', 'x.id');
newElt.appendChild(newText);
selectElt.appendChild(newElt);
})

How can I create an option element using javascript and set it's value

1 Answers1