Динамическое создание окна выбора с данными из массива

Question

Я пытаюсь создать окно выбора динамически с данными, находящимися внутри массива, я пробовал просматривать некоторые обучающие программы JSON, но все же имею некоторые проблемы.

var clothes = [ 
    Red Dress:"reddress.png", 
    Blue Dress:"bluedress.png", 
    Black Hair Pin:"hairpin.png" 
]; 

var select = '<select id="clothing_options">'; 
for(var i=0;i<clothes.length;i++) 
{ 
    select +='<option value="'+secondPart[i]+'">'+firstPart[i]+'</option>'; 
} 

$('#select_box_wrapper').append(select+'</select>'); 

$('#clothing_options').change(function() { 
    var image_src = $(this).val(); 
    $('#clothing_image').attr('src','http://www.imagehosting.com/'+image_src); 
}); 

как вы видите, код не работает полностью, потому что он написан неправильно. Как получить данные для значения из второй части и текст опции из первой части? в основном html должен выглядеть так:

<select id="clothing_options"> 
     <option value="reddress.png">Red Dress</option> 
     <option value="bluedress.png">Blue Dress</option> 
     <option value="hairpin.png">Black Hair Pin</option> 
    </select> 

благодарит за любые объяснения или предложения. Просто хочу, чтобы этот код работал, так как я просто делаю эти коды уроков для себя

Answer 1

Вы можете изменить массив в объект JSON ..

var clothes = { 
"Red Dress":"reddress.png", 
"Blue Dress":"bluedress.png", 
"Black Hair Pin":"hairpin.png" 
}; 

, а затем итерации становится легче ..

for(var item in clothes) 
{ 
    $('<option value="'+item+'">'+clothes[item]+'</option>').appendTo('#clothing_options'); 
} 

Вот HTML:

<div id="select_box_wrapper"> 
    <select id="clothing_options"></select> 
</div> 

Demo

Answer 2

Первая проблема:

var clothes = { 
Red_Dress:"reddress.png", 
Blue_Dress:"bluedress.png", 
Black_Hair_Pin:"hairpin.png" 
}; 

Вы не можете иметь пробелы в идентификаторах.

Во-вторых, в цикле через объект:

for (var key in clothes) 
{ 
    select +='<option value="'+clothes[key]+'">'+key+'</option>'; 
} 

Конечно, это имеет нежелательный эффект, показывающий «Red_Dress» в поле выбора.

var clothes = { 
"Red Dress":"reddress.png", 
"Blue Dress":"bluedress.png", 
"Black Hair Pin":"hairpin.png" 
}; 

Это исправит.