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

Create drop down list from multidimentional nested json array

本文关键字：数组 创建 下拉列表 json 嵌套      更新时间：2023-09-26

我需要创建drop下拉列表基于以下json数组，将有5个下拉列表，如果我选择，我需要填充其他四个，例如，如果我在第一个下拉列表中选择印地语，然后是

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

现在，当我使用jquery来实现这一点时，列表没有正确填充。我无法打破内部阵列。我正在附加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"]
      ]
    }

解析JSON时，假设每个下拉列表都有相同的结构：

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

然后对每个下拉列表都做同样的操作。

代码：

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

示例：此处

相关文章：