使用数组中的数据动态创建选择框

我正在尝试使用数组内的数据动态创建一个选择框，我尝试观看一些JSON教程，但仍然遇到一些麻烦。

var clothes = [ Red Dress:"reddress.png", Blue Dress:"bluedress.png", Black Hair Pin:"hairpin.png" ]; var select = ''; for(var i=0;i<clothes.length;i++) { select +=''+firstPart[i]+''; } $('#select_box_wrapper').append(select+''); $('#clothing_options').change(function() { var image_src = $(this).val(); $('#clothing_image').attr('src','http://www.imagehosting.com/'+image_src); }); 

正如您所看到的，代码没有完全正常运行，因为它没有正确编写。 如何从第二部分获取值的数据，从第一部分获取选项文本？ 基本上html应该是这样的

   Red Dress Blue Dress Black Hair Pin  

感谢您的任何解释或建议。 只是想让这段代码起作用，因为我只是为自己做这些代码

Answer 1

您可以将数组更改为JSON对象..

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

然后迭代变得更容易..

 for(var item in clothes) { $(''+clothes[item]+'').appendTo('#clothing_options'); } 

这是HTML：

演示

Answer 2

第一个问题：

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

您不能在标识符中包含空格。

其次，循环一个对象：

  for (var key in clothes) { select +=''+key+''; } 

当然，这会产生在选择框中显示“Red_Dress”的不良影响。

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

这将解决它。