从multidimentional嵌套json数组创建下拉列表

Question

我需要创建基于下面的json数组下拉列表 下拉列表，如果我选择我需要填充其他四个例如如果我选择印地文第一个下拉列表，然后

Second list   Third list   Forth list  Fifth list 
    "History",  "Philosophy", "Political Science" "English" 
    "Sociology",  "BLANK"    "BLANK"   "BLANK" 
    "Economics"        

现在，当我使用jQuery来实现这个列表不填充properly.I不能分解内阵列。 我附加链接jsfidle。我必须更改json格式。

{ 
     "Hindi": [ 
     [ 
      "History", 
      "Sociology", 
      "Economics" 
     ], 
     "Philosophy", 
     "Political Science", 
     "English" 
     ], 
     "Bengali": [ 
     ["History" ,"Sociology" 
     ], 
     "Sanskrit", 
     "Philosophy", 
     "Political Science" 
     ], 
     "English": [["History","Sociology","Economics"], 
     "Philosophy", 
     "Political Science", 
     ["Bengali","Hindi"] 

     ] 

    } 

Answer 1

当解析JSON假设你有每一个下拉相同的结构：

{"1select":[["2select values..."],[3select values..."],[4select values..."],[5select values..."]]} （如果没有array - >创建一个）

，比做每一个下拉列表相同。

CODE：

var jsonObj = {"Hindi":[["History","Sociology","Economics"],"Philosophy","Political Science","English"],"Bengali":[["History","Sociology"],"Sanskrit","Philosophy","Political Science"],"English":[["History","Sociology","Economics"],"Philosophy","Political Science",["Bengali","Hindi"]]} 

function updateSelect() { 
    var getOpts = function(raw){ 
     var values = raw; 
     if (!(raw instanceof Array)){ 
      values = [raw, ""]; 
     } 
     var result = []; 
     values.forEach(function(obj){ 
      result.push(new Option(obj, obj)); 
     }); 
     return result; 
    }; 


    var newKey = $("#select1").val(); 
    var mappings = [{"#select2":0},{"#select3":1},{"#select4":2},{"#select5":3}]; 
    var selected = jsonObj[newKey]; 

    mappings.forEach(function(mapping){ 
     var selector = Object.keys(mapping)[0]; 
     var index = mapping[selector]; 
     $(selector).empty(); 
     var opts = getOpts(selected[index]); 
     $(selector).append(opts); 
    }); 

} 

$(document).ready(function() { 
    $("#select1").change(updateSelect); 
    updateSelect(); // For initial page load. 
}); 

实施例：here