Jquery 用json数据填充下拉列表

我需要用城市填充下拉列表，并用城市机场代码设置值，我有以下jquery代码，我想知道它有什么问题？它没有填充下拉列表

<script>
    $(document).ready(function () {
        $(function (request, response) {
            $.ajax({
                url: "http://iatacodes.org/api/v4/cities",
                jsonp: "callback",
                dataType: "jsonp",
                data: {
                    api_key: "XXX-XXXX-XXXXXX-XXXXX"
                },
                success: function (data) {
                    if (data) { // success
                        response($.map(data, function (item) {
                            return $('<option>').val(item.code).text(item.name);
                        })).appendTo('#Cities');
                    } else { // no results
                        response();
                    }
                }
            });
        });
    });
</script>

<select class="selectpicker" id="Cities" name="Cities">
      <option value="" selected>Select City</option>
</select>

---

与使用

$.map（）

函数不同，您可以使用

$.each（）

对

数据中的项目进行迭代。response

数组并在每次迭代中附加

选项

元素：

$。每个（数据、响应、函数（\uux、项）{
$（''）.val（item.code）.text（item.name）.appendTo（'#Cities'）；
});

因此，您的成功回调将是：

success: function (data) {
  if (data) {
    $.each(data.response, function (_, item) {
      $('<option></option>').val(item.code).text(item.name).appendTo('#Cities');
    });
  } else {
    // no result
  }
}

成功：函数（数据）{
如果（数据）{
$.each（data.response，function（\ux，item）{
$（''）.val（item.code）.text（item.name）.appendTo（'#Cities'）；
});
}否则{
//没有结果
}
}

您可以这样做：

---

只需添加.jsonp和&callback=yourJSMethodName

数据类型是jsonp，我认为您需要一个回调函数来从中获取数据。不过我不确定。你得到什么结果了吗？根据fiddler的说法，我得到了一个成功的回复。你能添加fiddler吗？你能从fiddler发布你的json原始数据吗？你的json数据不是

jsonp

。您可以使用

数据类型：“json”

。但是，您可能会遇到CORS问题，因为

访问控制允许源代码：

可能没有出现在您的响应中。我认为代码可以工作，但我尝试将整个代码粘贴到JSFIDLE，包括ajax调用。它没有填充我检查过的城市telerik fiddler json仍在下载，它很大，几秒钟后就完成了，但是下拉列表是空的。编辑：我得到了一个未捕获的错误SyntaxError：意外标记：@Nevi这很奇怪，因为它在这里的示例中工作-。。如果不查看所有代码，我不确定问题出在哪里。

$.each(data.response, function (_, item) {
  $('<option></option>').val(item.code).text(item.name).appendTo('#Cities');
});

success: function (data) {
  if (data) {
    $.each(data.response, function (_, item) {
      $('<option></option>').val(item.code).text(item.name).appendTo('#Cities');
    });
  } else {
    // no result
  }
}