Question

我正试图用外部的JSON档案中的数据来填补一个超文本的Droopdown平。

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

我要说的是,把菜单 drop倒下来,显示目的地Name,例如伦敦、纽约等,但混淆了如何这样做。

感谢任何帮助。

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

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

Answer 2

引言:

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

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

它使你们能够获得目的地变量的目的地价值,因为之后,能够与这一变量的数值做一切。

Answer 3

认为你从像服务器这样的服务器得到响应

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

然后,你的下一个步骤应该是使这支大 j子失去活力。

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

http://jsfiddle.net/Fa9H5/1/“rel=“nofollow” Fiddle Demo

Answer 4

使用<条码>每一条和<条码>>>>>>> > > > > 类似:

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

<http://jsfiddle.net/manoj_admlab/Mta5b/3/"rel=“nofollow”>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>

工作实例确保了html的档案或你制作的网页ajax>---- >在同一领域(jonathangatenby.co.uk)

友情链接