使用JSON數組名稱動態填充下拉菜單

Question

我想用對象類別名稱填充下拉菜單。聽起來很簡單，但我無法弄清楚這一點。請幫忙。

例如：

JSON

window.cars = 
{ 

"compact": 

[ 
{ "title": "honda", 
     "type": "accord", 
     "thumbnail": "accord_t.jpg", 
     "image": "accord_large.jpg" }, 
{ "title": "volkswagon", 
     "type": "rabbit", 
     "thumbnail": "rabbit_t.jpg", 
     "image": "volkswagon_large.jpg" } 
], 

"trucks": 

[ 
{ "title": "Ford", 
    "type": "f-150", 
    "thumbnail": "ford_t.jpg", 
    "image": "chevy_large.jpg" }, 
{ "title": "GMC", 
     "type": "silverado", 
     "thumbnail": "gmc_t.jpg", 
     "image": "gmc_large.jpg" } 
] 
}; 

因此， 「緊湊型」 和 「卡車」 將填充下拉菜單。

HTML + JQUERY

$.each(cars, function(k, v){ 

$('select').append('<option value="' + k + '">' + k + '</option>'); 

}); 

} 

任何想法，爲什麼這是不行的？

在此先感謝！

Answer 1

您必須使用該JSON中的2種類型的對象。你可以這樣做填充元素：

$(function(){ 
    window.cars = {...}; // JSON 

    $.each(cars['compact'], function(k, v){ 
     $('select').append('<option value="' + k + '">' + v.title + '</option>'); 
    });  
}); 

或者，如果你必須使用兩個對象，你通過每一個具有循環（假設所有對象包含數組中的相似性

$(function(){ 
    window.cars = {...}; // JSON 

    var index = 0; 
    $.each(cars, function(k, v){ 
     $.each(v, function(i, obj){ 
      $('select').append('<option value="' + index + '">' + obj.title + '</option>'); 
      index++; 
     }); 
    });  
});