使用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中使用两种类型的对象。您可以通过这样填充元素：

$(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++;
      });
    });    
});