使用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++; 
     }); 
    });  
});