從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