Fill HTML dropdown box with external JSON file data

问题

I am trying to fill a HTML Dropdown menu with data from an external JSON file, which contains the following

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

What I would like is the drop down menu to display the destinationName, such as London, New York etc but i'm confused as how to approach this.

Any help is appreciated.

回答1:

Create a <select> tag in your html and fill it with <option> using the value attribute. Value will be your destinationID, but it will show destinationName.

Example

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

回答2:

Try this code :

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

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

It allows you to get the destination value in the destination variable, for, after, can do everything with values of this variable.

回答3:

Consider you have got the response from server like

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

Then your next step should be iteration of that json

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

YOu can see the demo here Fiddle Demo

回答4:

Use each and append select like this:

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

jsFiddle

Updated Example (test.html for http://jonathangatenby.co.uk/Candidate/json/destinations.json)

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

Example to work make sure html file or the file from which you are making the ajax call are on same domain (jonathangatenby.co.uk)

来源：https://stackoverflow.com/questions/17760866/fill-html-dropdown-box-with-external-json-file-data

标签

jquery

html

json

html-select