使用json填充选择下拉列表

Question

使用jQuery，我试图用json填充选择下拉列表。我想显示从下面的JSON国家名单...

{ 
"country":[ 
    { 
    "China":[ 
     { 
      "tarrifType":"Pay as you go" 
     }, 
     { 
      "fixLine":"23p" 
     } 
    ], 
    "India":[ 
     { 
      "sms":"39p" 
     }, 
     { 
      "fixLine":"3p", 
      "sms":"59p" 
     } 
    ], 
    "Poland":[ 
     { 
      "mobile":"29p", 
      "sms":"19p" 
     }, 
     { 
      "tarrifType":"China Pass", 
      "fixLine":"23p" 
     } 
    ] 
    } 
] 
} 

到目前为止，我已经尝试与被下面做这个jQuery的...

$.getJSON("js/widgets/country-picker.json", function(result){ 
    $.each(result, function(i, field) { 
    $('#js-rate-select').append($('<option>').text(field[1]).attr('value', field[1])); 
    }); 
}); 

但它确实不填充选择下拉列表或提供任何DOM错误。任何建议如何我可以解决这个问题？我认为这个问题是由于json格式 - 我可以改变谢谢

Answer 1

你的json提要返回一个只包含一个索引的数组，这个索引是不同国家的一个对象。为此，你应该说

result.country[0].China.tarrifType. 

而且，你将能够重复的国家是这样的：

$.each(result.country[0], function(country,data) { console.log(country); } 

虽然，我会建议重做你JSON。你可以这样做：

var result = { 
    "country": { 
     "China": { 
      "tarrifType": "Pay as you go", 
      "fixLine": "23p" 
     }, 
     "India": { 
      "sms": "39p", 
      "fixLine": "3p", 
      "sms": "59p" 
     }, 
     "Poland": { 
      "mobile": "29p", 
      "sms": "19p", 
      "tarrifType": "China Pass", 
      "fixLine": "23p" 
     } 
    } 
}; 


$(function() { 
    $.each(result.country, function (country, data) { 
     console.log("Country : " + country); 
     console.log(data); // data.fixLine, data.tarrifType, data.sms 

     $('#selectbox').append('<option value="' + country + '">' + country + '</option>'); 

    }); 
}); 

的jsfiddle这里： Link to JSfiddle