Question

我遇到了一个我无法弄清楚的有趣问题。我正在将一些数据动态加载到html <select></select>。

我发现的是，当我刷新页面时，有时会加载数据，但通常情况下，没有任何内容。页面加载过快还是每次页面重新加载时都没有处理文件？

我尝试了多种浏览器，体验也一样。

这是我的HTML：

<select id="group-select-user-access" class="blue-text">
     <option value="" disabled selected>Select a Google Group</option>
</select>

这是我的javascript：

<script type="text/javascript">
        var group_list = "json/google_group_list.json";

        $.getJSON(group_list, function(json) {
            $.each(json, function(key) {
                var email_stripped = json[key].substring(0, json[key].lastIndexOf("@"));
                $('select[id=group-select-user-access]').append('<option value="' + email_stripped + '">' + json[key] + '</option>');
            });
        });
</script>

.json文件很简单，格式如下：

["email1@test.com", "email2@test.com", "email3@test.com", ...]

当涉及到JS / jQuery时，我相对较新，所以任何帮助都会受到赞赏。

我应该在下一步方向进行故障排除？

Answer 1

当您尝试修改DOM时，可能是DOM未完全加载的问题

尝试将脚本标记移动到文档的最末端，或者使用array_column

包装js代码

$(document).ready

这样你的代码会等到整个文档被加载后再尝试向它添加内容

Javascript .getJSON .each只在某些时候有用

1 个答案: