我正在尝试使用外部 JSON 文件中的数据填充 HTML 下拉菜单,其中包含以下内容
{
"Destinations": [
{
"destinationName": "London",
"destinationID": "lon"
},
{
"destinationName": "New York",
"destinationID": "nyc"
},
{
"destinationName": "Paris",
"destinationID": "par"
},
{
"destinationName": "Rome",
"destinationID": "rom"
}
]
}
我想要的是显示目的地名称的下拉菜单,例如伦敦、纽约等,但我对如何解决这个问题感到困惑。
如有任何帮助,我们将不胜感激。
在 html 中创建一个
<select>
标签,并使用 <option>
属性将其填充为 value
。
Value
将是您的 destinationID
,但它会显示 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>
试试这个代码:
$.getJSON('yourfile.json', function(data) {
destinations = data['Destinations']
$.each(destinations, function(id, destination) {
destination = destination["destinationName"]
alert(destination)
})
});
它允许您获取目标变量中的目标值,for、after、可以使用该变量的值执行任何操作。
假设您已从服务器收到类似
的响应{
"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 演示
像这样使用
each
和 append
select
:
$.each(data.Destinations, function(i, v) {
$('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>');
});
更新示例(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)