使用 jquery/json 填充下拉列表

Question

这是我第一次请求帮助（仍然是一个新手编码器）所以请不要犹豫告诉我我在做一些愚蠢的事情。

我已经构建了一个包含数千个项目的 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>

我有一种强烈的感觉，我错过了一些明显的东西......如果有人能指出它，我将不胜感激！

Answer 1

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

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

                            });

试试这个JSFIDDLE 对你有用吗？

Answer 2

我更新了 Alex Berd 提供的 JSFiddle，它应该填充两个下拉列表：here.

您不能（准确地）将它们都填充在同一个 $.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§