用jquery / json填充下拉列表
[英]Populating a dropdown with jquery/json
問題描述
這是我第一次請求幫助（仍然是新手程序員），所以請不要猶豫告訴我我在做愚蠢的事情。
我已經構建了一個包含數千個項目的JSON文件，並且希望能夠動態填充該文件在各個頁面上的下拉菜單，並稍后根據之前的選擇動態填充下拉菜單。 我對此進行了徹底研究，但似乎我發現的大多數教程和問題似乎都不以這種特定方式起作用。 本質上，我加載了頁面，但項目無法填充； 也就是說，下拉列表為空。 控制台僅顯示一個錯誤，根據我能找到的所有信息，該錯誤指示CDN尚未加載。 因此，這里是：
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<select id="mainhand"></select>
<br>
<select id="offhand"></select>
<script type="text/javascript">
$(document).ready(function() {
//request the JSON data and parse into the select element
$.getJSON('http://nodtools.net/stats.json', function(obj) {
//iterate over the data and append a select option
$.each(data.item, function(key, value) {
// set the value of option to each item in the list as you iterate through
var option = $('<option><option/>').val(value.name).text(value.name);
// almost any of them can be added to the main hand
if (value.type == 'slash' || value.type == 'crush' || value.type == 'pierce' || value.type == 'whip' || value.type == 'staff') {
$('#mainhand').append(option);
};
// only shields and 1h weapons can be in off hand
if (value.hands == 1 || value.type == 'shield') {
$('#offhand').append(option);
// continue on for all types: bow, arrow, quiver, etc.
});
});
});
});
</script>
</body>
</html>
我有一種強烈的感覺，我想念的是顯而易見的東西……如果有人指出來，我將不勝感激！
2 個解決方案
解決方案1
0 已采納 2015-10-22 05:27:41
我認為您有一些代碼錯誤，例如方括號放在正確的位置或不必要的方括號：
$(document).ready(function() {
//request the JSON data and parse into the select element
$.getJSON('http://nodtools.net/stats.json', function(obj) {
//iterate over the data and append a select option
$.each(data.item, function(key, value) {
// set the value of option to each item in the list as you iterate through
var option = $('<option><option/>').val(value.name).text(value.name);
// almost any of them can be added to the main hand
if (value.type == 'slash' ||
value.type == 'crush' ||
value.type == 'pierce' ||
value.type == 'whip' ||
value.type == 'staff')
{
$('#mainhand').append(option);
}
// only shields and 1h weapons can be in off hand
if (value.hands == 1 || value.type == 'shield') {
$('#offhand').append(option);
}
// continue on for all types: bow, arrow, quiver, etc.
});
});
});
解決方案2
0 2015-10-22 23:41:49
我已經更新了Alex Berd提供的JSFiddle，它應該填充兩個下拉列表： 此處。
您不能（准確地）將它們都填充在同一$.each(/**/)塊中，盡管我不能確切地告訴您為什么不這樣做。 我確定其他人可以清除。
代碼的相關部分看起來像這樣：
$(document).ready(function () {
//iterate over the data and append a select option
$.each(items, function (key, value) {
// set the value of option to each item in the list as you iterate through
var option = $('<option>').val(this.name).text(this.name);
// almost any of them can be added to the main hand
if (items.type != 'shield' && items.type != 'bow' /* etc. */) {
$('#mainhand').append(option);
}
})
//iterate over the data and append a select option
$.each(items, function (key, value) {
// set the value of option to each item in the list as you iterate through
var option = $('<option>').val(this.name).text(this.name);
// only shields and 1h weapons can be in off hand
if (this.hands == 1 || this.type == 'shield') {
$('#offhand').append(option);
}
})
/*
* continue on for all types: bow, arrow, quiver, etc.
*/
})
現在，您只需要正確導入.json數據即可。
謝謝，
C§
使用jquery填充下拉列表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.