Jquery 用外部JSON文件数据填充HTML下拉框

我试图用外部JSON文件中的数据填充HTML下拉菜单，该文件包含以下内容

{
    "Destinations": [
    {
        "destinationName": "London",
        "destinationID": "lon"
    },
    {
        "destinationName": "New York",
        "destinationID": "nyc"
    },
    {
        "destinationName": "Paris",
        "destinationID": "par"
    },
    {
        "destinationName": "Rome",
        "destinationID": "rom"
    }
    ]
}

我想要的是显示destinationName的下拉菜单，如伦敦、纽约等，但我不知道如何实现这一点

非常感谢您的帮助。

在html中创建一个标记，并使用value属性填充它。 值将是您的destinationID，但它将显示destinationName

请尝试以下代码：

$.getJSON('yourfile.json', function(data) {
    destinations = data['Destinations']

    $.each(destinations, function(id, destination) {
        destination = destination["destinationName"]
        alert(destination)
    })
});

---

它允许您在destination变量中获取destination值，因为之后，您可以使用该变量的值执行所有操作。

请考虑您已经从类似服务器的服务器获得了响应

{
    "Destinations": [
    {
        "destinationName": "London",
        "destinationID": "lon"
    },
    {
        "destinationName": "New York",
        "destinationID": "nyc"
    },
    {
        "destinationName": "Paris",
        "destinationID": "par"
    },
    {
        "destinationName": "Rome",
        "destinationID": "rom"
    }
    ]
}

然后，下一步应该是该json的迭代

$.each(data.Destinations, function(key, val) {
    items.append('<option value="' + val.destinationID + '">' + val.destinationName + '</option>');
  });

您可以在此处看到演示

使用每个并附加如下选择：

$.each(data.Destinations, function(i, v) {
    $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>');
});

更新了的示例test.html

---

示例工作确保html文件或进行ajax调用的文件位于同一个域jonathangatenby.co.uk上

可能重复：请参见我的答案嗨，在您的JSFIDLE示例中，它确实收集了目的地，但是，如何从外部文件而不是Javascript收集JSON呢？用url更改url“/echo/JSON/”，并从url返回JSON格式的响应对不起，您可能已经很好地解释了这一点，但我想我没有理解它。例如，是我将尝试使用的JSON URL文件，这将替换“/echo/JSON/？Yes”，但html文件或进行ajax调用的文件应位于同一域中。答案已更新。谢谢你迄今为止的帮助，但恐怕还是没有运气。我已经复制了您提供的代码，但是当按下“Fetch JSON”时，不会获取任何内容。对此我深表歉意，非常感谢你的帮助。

$.each(data.Destinations, function(i, v) {
    $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>');
});

<select id="destinations">
    <option value="">Select</option>
</select>
<a href="#" id="fetch">Fetch JSON</a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#fetch').click(function() {
        $.post('http://jonathangatenby.co.uk/Candidate/json/destinations.json', {}, function(data) {
            $.each(data.Destinations, function(i, v) {
                $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>');
            });
        });
    });
});
</script>