Question

我有一组选择字段#jobstatus，#jobsize等...

这些用于整个项目的几个页面。

为了使这些选择字段在整个项目中保持最新，我正在尝试使用getJSON来解析保存在外部JSON文件中的JSON值。

我希望每个选择字段的选项值使用相应JSON文件中的正确值填充。

JSON数组遵循以下格式：

/*Job Status */    
[
    { "name": "All Job Statuses" },
    { "name": "To start" },
    { "name": "In progress" },
    { "name": "On hold" },
    { "name": "Completed" },
    { "name": "Cancelled"}
]

/*Job type */    
[
    { "name": "All Job Types" },
    { "name": "Development" },
    { "name": "Feature/Service" },
    { "name": "Task Submission" },
    { "name": "Bug/Fix" },
    { "name": "Chore" },
    { "name": "Misc/Other" },
    { "name": "Discussion/Planning" },
]

选择字段的相应html如下：

<select id="jobstatus" class="json" ></select>
<select id="jobtypes" class="json" ></select>

我想使用getJSON函数来解析每个选择字段的正确数据，但我无法弄清楚如何让脚本为每个选择字段运行getJSON函数。

到目前为止，这是我的脚本：

$('#filter select.json' ).each(function () {
    var select = $(this, 'select');
    var selectid = select.prop('id');

    $(select).attr({
        required:'required',
        name: selectid
    }).addClass('form-control');  

    $.getJSON('js/' + selectid + 'data.json', function(data){
        var html = '';
        var len = data.length;
        for (var i = 0; i< len; i++) {
            html += '<option';
            if(i == 0) { 
                html += ' selected';
            }; 
            if(i > 0) { 
                html += ' value="' + i + '"';
            }; 
            html += '>' + data[i].name + '</option>';
        }
        $('#' + selectid).append(html);
    });

    console.log('select ', select + ' , selectid ', selectid);
});

我哪里出错了？只有第一个选择字段#jobstatus填充了第一个数组中的数据，这不是我所期望的。

将这些JSON文件合并为一个有什么好处吗？

由于

Answer 1

经过大量阅读后，我已经解决了这个问题。

我已将我的JSON数组分组到一个文件（jobsdata.php）并切换到$.ajax而不是$.getJSON，因为我可以添加一个错误后退，而不是任何hapenening

更新后的JSON：

{
    "jobstatus": [
        { "name": "Select a Job Status"  },
        { "name": "To start" },
        { "name": "In progress" },
        { "name": "On hold" },
        { "name": "Completed" },
        { "name": "Cancelled" }
    ],
    "jobtype": [
        { "name": "Select a Job Type" },
        { "name": "Development" },
        { "name": "Feature/Service" },
        { "name": "Task Submission" },
        { "name": "Bug/Fix" },
        { "name": "Chore" },
        { "name": "Misc/Other" },
        { "name": "Discussion/Planning" }

    ]
}

我更新的脚本：

$('#filter select.json' ).each(function () {
    var select = $(this, 'select');
    var selectid = $(this).prop('id');

    $(select).attr({
        required:'required',
        name: selectid
    }).addClass('form-control');  


    $.ajax({
        url: 'js/jobdata.json',
        dataType:'JSON',

        success:function(data){
            //clear the current content of the select
            $('#' + selectid).html('');
            //iterate over the data and append a select option
            $(select).each(function () {
                var html = '';
                var len = data[selectid].length;
                for (var i = 0; i< len; i++) {
                    html += '<option';
                    if(i == 0) { 
                        html += ' selected';
                    }; 
                    if(i > 0) { 
                        html += ' value="' + i + '"';
                    }; 
                    html += '>' + data[selectid][i].name + '</option>';
                }                
                $('#' + selectid).append(html);
            })
        },
        error:function(){
            //if there is an error append a 'selectid unavailable' option
            $('#' + selectid).html('<option id="-1">' + selectid + ' unavailable</option>');
        }
    });  

    console.log('selectid ', selectid);

});

JSON填充多个选择字段

1 个答案: