Adding option values and inner HTML from an Array or Object

Question

I would like to know the best approach to use JavaScript to create a new HTML element <option> from each item in an array (or perhaps not use an array if there's a better method?

How would I run a loop that creates a new option for each item in the array and then assign the url as the options value.

Here is my current JS Fiddle.

My JS is as follows:

    var images = [
  "Sports 1",
    "http://lorempixel.com/50/50/sports/1",
  "Sports 2",
    "http://lorempixel.com/50/50/sports/2",
  "Sports 3",
    "http://lorempixel.com/50/50/sports/3",
];

var index, len;
for (index = 0, len = images.length; index < len; index++) {
    var newoption = document.createElement('option');
    newoption.innerHTML = images[index];
    document.getElementById('imagelist').appendChild(newoption);
}

The html should look like this:

<form id="imageform">
  <select id="imagelist" name="imagelist">
    <option value="http://lorempixel.com/50/50/1">Sports 1</option>
    <option value="http://lorempixel.com/50/50/1">Sports 1</option>
    <option value="http://lorempixel.com/50/50/1">Sports 1</option>
  </select>
</form>

Ramanlfc · Accepted Answer · 2016-03-01 10:59:05Z

1

use an object to store your key-value pairs.

var images = {
  "Sports 1" :
    "http://lorempixel.com/50/50/sports/1",
  "Sports 2":
    "http://lorempixel.com/50/50/sports/2",
  "Sports 3":
    "http://lorempixel.com/50/50/sports/3",
};

var index, len;
var keys  = Object.keys(images);

for (index = 0, len = keys.length; index < len; index++) {
    var temp = keys[index];
    var newoption = new Option(temp, images[temp]);
    document.getElementById('imagelist').add(newoption);
}

https://jsfiddle.net/Luyxqu75/2/

edited Mar 1, 2016 at 10:59

answered Mar 1, 2016 at 10:47

Ramanlfc

8,3541 gold badge21 silver badges24 bronze badges

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

Comments

Rayon · Accepted Answer · 2016-03-01 10:46:43Z

0

Instead of array, you should have array of objects

Try this:

var images = [{
  "key": "Sports 1",
  "value": "http://lorempixel.com/50/50/sports/1"
}, {
  "key": "Sports 2",
  "value": "http://lorempixel.com/50/50/sports/2"
}];

for (var index = 0, len = images.length; index < len; index++) {
  var newoption = document.createElement('option');
  newoption.value = images[index].value;
  newoption.innerHTML = images[index].key;
  document.getElementById('imagelist').appendChild(newoption);
}

<form id="imageform">
  <select id="imagelist" name="imagelist">
  </select>
</form>

Fiddle

answered Mar 1, 2016 at 10:46

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Collectives™ on Stack Overflow

Adding option values and inner HTML from an Array or Object

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