Fatal编程技术网
  • javascript/
  • Javascript 用jquery/json填充下拉列表

Javascript 用jquery/json填充下拉列表

javascript jquery json

Javascript 用jquery/json填充下拉列表,javascript,jquery,json,dropdown,Javascript,Jquery,Json,Dropdown,这是我第一次请求帮助（还是一个新手），所以请不要犹豫告诉我我做了一些愚蠢的事情 我已经构建了一个JSON文件，该文件将包含数千项，我希望能够在该文件的各个页面上动态填充下拉列表，然后根据先前的选择动态填充下拉列表。我对此进行了深入的研究，但似乎我发现的大多数教程和问题都不是以这种特殊方式工作的。基本上，我加载了页面，但项目无法填充；也就是说，下拉列表是空的。控制台只显示一个错误，根据我能找到的所有信息，这表明CDN没有被加载。这就是： <html> <head>

这是我第一次请求帮助（还是一个新手），所以请不要犹豫告诉我我做了一些愚蠢的事情

我已经构建了一个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>




$（文档）.ready（函数（）{
//请求JSON数据并解析到select元素中
$.getJSON（'http://nodtools.net/stats.json，函数（obj）{
//迭代数据并附加一个选择选项
$.each（数据项、函数（键、值）{
//在遍历时为列表中的每个项目设置option的值
var option=$（''）.val（value.name）.text（value.name）；
//几乎任何一个都可以添加到主手
如果（value.type='slash'| | value.type=='crush'| | | value.type=='pierce'| | value.type=='whip'| | value.type=='staff'）{
$（'#mainhand'）。追加（可选）；
};
//只有盾牌和1h武器可以随时使用
如果（value.hands==1 | | value.type==shield'）{
$（'#即席'）。附加（可选）；
//继续所有类型：弓、箭、箭袋等。
});
});
});
});
我有一种强烈的感觉，我错过了一些显而易见的东西……如果有人能指出，我将不胜感激

我认为您有一些代码错误，例如括号在正确的位置或不必要的括号：

$(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.
                                        });
                                    });

                            });

$（文档）.ready（函数（）{
//请求JSON数据并解析到select元素中
$.getJSON（'http://nodtools.net/stats.json，函数（obj）{
//迭代数据并附加一个选择选项
$.each（数据项、函数（键、值）{
//在遍历时为列表中的每个项目设置option的值
var option=$（''）.val（value.name）.text（value.name）；
//几乎任何一个都可以添加到主手
如果（value.type==“斜杠”|124;
value.type=='crush'||
value.type=='pierce'||
value.type=='whip'||
value.type=='staff'）
{
$（'#mainhand'）。追加（可选）；
}
//只有盾牌和1h武器可以随时使用
如果（value.hands==1 | | value.type==shield'）{
$（'#即席'）。附加（可选）；
}
//继续所有类型：弓、箭、箭袋等。
});
});
});
试试这个
它适合您吗？

我已经更新了Alex Berd提供的JSFIDLE，它应该填充两个下拉列表：

您不能（准确地）在同一个
$中填充它们。每个（/**/）
块，尽管我不能确切地告诉您为什么不能。我相信其他人可以澄清这一点

代码的相关部分如下所示：

$(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.
     */
})

$（文档）.ready（函数（）{
//迭代数据并附加一个选择选项
$。每个（项目、功能（键、值）{
//在遍历时为列表中的每个项目设置option的值
var option=$（''）.val（this.name）.text（this.name）；
//几乎任何一个都可以添加到主手
if（items.type！=“shield”&&items.type！=“bow”/*等。*/）{
$（'#mainhand'）。追加（可选）；
}
})
//迭代数据并附加一个选择选项
$。每个（项目、功能（键、值）{
//在遍历时为列表中的每个项目设置option的值
var option=$（''）.val（this.name）.text（this.name）；
//只有盾牌和1h武器可以随时使用
if（this.hands==1 | | this.type==shield'）{
$（'#即席'）。附加（可选）；
}
})
/*
*继续所有类型：弓、箭、箭袋等。
*/
})
现在您只需要正确导入.json数据

谢谢

C§

“我对此进行了深入的研究，但我发现的大多数教程和问题似乎都不是以这种特定的方式工作的”-我猜这是因为每次显示下拉列表时，用数千项解析JSON是一个非常非常糟糕的主意，因为大多数情况下，您可能只需要JSON中的5或10个项目。请检查该链接。我想这就是你想要达到的目标。具体的问题是什么？你没有指出什么不起作用，但你不能将相同的
添加到两个不同的