Ajax添加选项以为每个json数组选择

时间:2014-01-06 01:26:36

标签: javascript jquery ajax json

我需要使用从ajax调用获得的值填充选择项,我将这些值作为json数组返回。使用下面的代码,创建选择时没有任何选项。

$.ajax({
  type: "GET",
  url: "/wp-content/gta/search_airport.php",
  data: {city: t_city}
}).done(function(resp){
  var sel = $('<select name="airport" id="slt">').appendTo('#pick_type');
  $.each(resp, function() {
$.each(this, function(k, v) {
$('<option>').val(k).text(v).appendTo('#slt');
   });
  });
});

示例json数组

[{"name":"Los Angeles","code":"LAX"},{"name":"San Francisco","code":"SFO"}]

我希望选项类似于<option value="LAX">Los Angeles</option>

2 个答案:

答案 0 :(得分:3)

您不需要嵌套$.each()。只需遍历数组并直接访问每个索引处对象的属性:

$.each(resp, function(k, v) {
    $('<option>').val(v.code).text(v.name).appendTo('#slt');
});

在第一次迭代中,v将为{"name":"Los Angeles","code":"LAX"},因此v.code将为"LAX"。在第二次迭代中,v将为{"name":"San Francisco","code":"SFO"},因此v.code将为"SFO" ...

(您可能还需要将dataType:"json"添加到$.ajax()选项中 - 如果您未指定jQuery尝试从响应的MIME类型中解决此问题。)

答案 1 :(得分:0)

试试这个,

$.ajax({
    type: "GET",
    url: "/wp-content/gta/search_airport.php",
    data: {city: t_city},
    dataType:"json"
}).done(function(resp) {
    var sel = $('<select name="airport" id="slt">').appendTo('#pick_type');
    $.each(resp, function(key,val) {
        $.each(val, function(k, v) {
            $('<option>').val(k).text(v).appendTo('#slt');
        });
    });
});