依賴項下拉列表中的JSON未定義數據

Question

我有三個下拉列表，分別稱為Platform，Tasktype和Component，它們相互依賴。 我已經弄清楚了直到第二個下拉列表才能獲取相關數據，但是第三個下拉列表未定義。

請參閱下面的工作演示。

http://plnkr.co/tFZhcTm1XeqK3NoHdG4z

jQuery查詢

$(function() {
var platforms;
var tasktypes;
var compos;
var jsonData;


$.getJSON('tasks.json', function(result) {
jsonData = result;

$.each(result, function(i, platform) {
platforms += "<option value='" +
  platform.name +
  "'>" +
  platform.name +
  "</option>";
});
$('#platform').html(platforms);
}); 

$("#platform").change(function (){
var idx = $("#platform").prop('selectedIndex');
var platforms = jsonData[idx].task;

tasktypes = "";
for (i = 0; i < platforms.length; i++) {
  tasktypes += "<option value='" +
    platforms[i].taskname +
    "'>" +
    platforms[i].taskname +
    "</option>";
};
$('#taskname').html(tasktypes);
});


$("#taskname").change(function (){
var idc = $("#taskname").prop('selectedIndex');
var tasktypes = jsonData[idc].task;

compos = "";
for (i = 0; i < tasktypes.length; i++) {
  compos += "<option value='" +
    tasktypes[i].componentname +
    "'>" +
    tasktypes[i].componentname +
    "</option>";
};
$('#components').html(compos);
});  
});

選擇平台和任務類型后，我想獲取相關的組件名稱。

Answer 1

   $("#taskname").change(function (){
    var idc = $("#taskname").prop('selectedIndex');
    var tasktypes = jsonData[idc].task;

console.log(tasktypes); // include and see what is coming over here in console 

    compos = "";
    for (i = 0; i < tasktypes.length; i++) {

console.log(tasktypes[i]); // include and see what is coming over here in console  

      compos += "<option value='" +
        tasktypes[i].componentname +
        "'>" +
        tasktypes[i].componentname +
        "</option>";
    };
    $('#components').html(compos);
    });  
    }); 

我相信某些地方缺少某些數據或腳本無法理解即將發生的情況