Jquery JSON填充多个选择字段

我有一组选择字段jobstatus、jobsize等

在整个项目的几个页面中都会用到这些

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

我希望每个select字段的选项值填充相应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" },
]

select字段对应的html如下所示：

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

我想使用getJSON函数来解析每个select字段的正确数据，但我不知道如何让脚本为每个select字段运行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);
});

我哪里出错了？只有第一个select FIELD jobstatus正在填充来自第一个数组的数据，这不是我所期望的

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

---

谢谢

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

我已经将我的JSON数组分组到一个文件jobsdata.php中，并切换到$.ajax而不是$.getJSON，因为我可以添加一个错误回退，这几乎是不可能的

更新后的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);

});

---

你怎么知道你做错了什么？您遇到了什么错误？只有第一个select FIELD jobstatus正在填充第一个数组，这不是我所期望的。没有错误。这段代码运行。