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

這將修復它。