0

我正在尝试使用来自外部 JSON 文件的数据填充 HTML 下拉菜单，该文件包含以下内容

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

我想要的是显示目的地名称的下拉菜单，例如伦敦、纽约等，但我对如何处理这个问题感到困惑。

任何帮助表示赞赏。

4

4 回答 4

0

在您的 html 中创建一个标签并使用该属性 <select>填充它。将是你的，但它会显示。<option>valueValuedestinationIDdestinationName

例子

<form action="demo_form.asp">
    <select name="cars">
        <option value="volvo">Volvo XC90</option>
        <option value="saab">Saab 95</option>
        <option value="mercedes">Mercedes SLK</option>
        <option value="audi">Audi TT</option>
    </select>
    <input type="submit" value="Submit">
</form>
于 2013-07-20T09:47:36.510 回答
0

each像这样使用append select：

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

jsFiddle

更新示例（http://jonathangatenby.co.uk/Candidate/json/destinations.json的 test.html ）

<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>

工作示例确保 html 文件或您从中制作的文件ajax call位于同一域 (jonathangatenby.co.uk)

于 2013-07-20T10:09:39.410 回答
0

试试这个代码：

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

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

它允许您在目标变量中获取目标值，因为之后，可以使用此变量的值做任何事情。

于 2013-07-20T10:00:32.537 回答
0

考虑到您已经收到来自服务器的响应，例如

{
    "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>');
  });

你可以在这里看到演示Fiddle Demo

于 2013-07-20T10:03:09.997 回答