JSON 填充多个选择字段答案

【问题标题】：JSON populate multiple select fieldsJSON 填充多个选择字段
【发布时间】：2014-12-03 22:50:05
【问题描述】：

我有一组选择字段#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 文件合并为一个有什么好处吗？

谢谢

【问题讨论】：

你怎么知道你做错了什么？你遇到了什么错误？
只有第一个选择字段 #jobstatus 填充了第一个数组，这不是我所期望的。
没有错误。此代码运行。

标签： jquery json

【解决方案1】：

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

我已将我的 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);

});

【讨论】：