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§

使用jquery / json填充下拉列表

2 个答案: