JSON填充多个选择字段

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); 

});