Добавление значений параметров и внутреннего HTML из массива или объекта

Question

Я хотел бы узнать лучший подход к использованию JavaScript для создания нового элемента HTML <option> из каждого элемента массива (или, возможно, не использовать массив, если есть лучший метод ?

Как бы запустить цикл, который создает новый option для каждого элемента в массиве, а затем присвоить URL в качестве значения параметров

Here is my current JS Fiddle.

Мой JS выглядит следующим образом:.

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

HTML, должен выглядеть следующим образом:

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

Answer 1

использовать объект для хранения пар ключ-значение.

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/

Answer 2

Вместо array, вы должны иметь array из objects

Попробуйте это:

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