0

我有一个 JSON 文件，用于自动填充一些选择框。时不时地（我无法重新创建故障，它似乎是随机的）下拉列表中的项目在我刷新页面之前不会显示。

我检查了控制台和日志等，文件加载正常，没有出现错误，我有点不知所措。

有任何想法吗？

JSON 示例和读取它的脚本如下。

谢谢。

"radAbsorbed" : [
    {
        "value" : "rad",
        "name" : "Rad(rd)"
    },
    {
        "value" : "millirad",
        "name" : "Millirad(mrd)"
    }]

和脚本：

<script>
//        JSON:
//        The key is the class identifier, temp, area etc etc
//        Value is being used for both ID and Value when the list is being populated
    $.getJSON('JSON/conversionJSON.json', function(data){

        console.log(data);
        //for testing output only
        var list = $("<ul />");

        $.each(data, function (key, conversions) {
            console.log(key + ":" + conversions);

            $.each(conversions, function (index, conversion) {
                console.log("<li>Name: " + conversion.name + " :Value: " + conversion.value + "</li>");

                if(key == "<?php echo $conversionType ?>"){

                    $("#from").append('<option class="'+key+'" id="'+conversion.value+'" value="'+conversion.value+'">'+conversion.name+'</option>');
                    //testing output
                    var elem = $("<li>Name: " + conversion.name + " :Value: " +     conversion.value + "</li>").appendTo(list);
                }
            });
        });
        //$("#testJSON").html(list);
    });
</script>

编辑：更新的脚本。

$(document).ready(function(){

$.getJSON('JSON/conversionJSON.json', function(data){

    console.log(data);
    //for testing output only
    var list = $("<ul />");

    $.each(data, function (key, conversions) {
        console.log(key + ":" + conversions);

        $.each(conversions, function (index, conversion) {
            console.log("<li>Name: " + conversion.name + " :Value: " + conversion.value + "</li>");

            if(key == "<?php echo $conversionType ?>"){

                $("#from").append('<option class="'+key+'" id="'+conversion.value+'" value="'+conversion.value+'">'+conversion.name+'</option>');
                $("#to").append('<option class="'+key+'" id="'+conversion.value+'" value="'+conversion.value+'">'+conversion.name+'</option>');
                //testing output
                var elem = $("<li>Name: " + conversion.name + " :Value: " + conversion.value + "</li>").appendTo(list);
            }
        });
    });
    //$("#testJSON").html(list);
});
});

编辑：感谢大家的帮助，它似乎工作正常，看起来像是我的业余错误。

4

1 回答 1

1

我认为问题在于您的脚本有时会在文档准备好之前运行。

尝试将您的代码包装在文档就绪函数中：

$(function() {
    $.getJSON(...)
    // ...
});

这将使代码在它影响的元素被创建之前不会执行。例如，如果您的代码在from创建具有 ID 的元素之前执行，则$('#from')不会匹配任何元素，并且它将无法工作。

将其包装在文档就绪函数中将确保您的代码等到元素创建完成后再执行。

或者，您可以将<script>标签移出头部，并将其#from放在 HTML 中的元素之后。这可能有助于它更快地加载。

于 2013-07-17T16:04:53.190 回答