在 HTML 下拉列表中动态显示嵌套的 JSON

如何解决在 HTML 下拉列表中动态显示嵌套的 JSON

我一直在使用 HTML5 BOOTSTRAP-css-JS 在 UI 中添加以下功能。

我正在尝试通过使用 JSON 输入来创建 UI 下拉菜单。

注意：“JSON 键”也可用作下拉值，而不仅仅是一般的“JSON 值”.. 因此，我无法工作找出相同的逻辑！

我有以下格式的 JSON：

{
  "BIKE LIST": {
    "Bajaj": {
      "Pulsar": {
        "350 CC": [
          "2019 Model","2020 Model"
        ],"500 CC": [
          "2018 Model","2021 Model"
        ]
      }
    }
  },"CAR LIST": {
    "Toyota": {
      "Etios": {
        "Liva": [
          "2019 Model","Regular": [
          "2018 Model","2021 Model"
        ]
      }
    },}
}

我想在 UI 中创建 5 个动态下拉菜单，如下所示：

下拉列表 1 值： 自行车清单，汽车清单

下拉列表 2（根据用户在下拉列表 1 中的选择显示的值）： 即如果用户选择 BIKE LIST， 我应该有“Bajaj”

下拉列表 3（根据用户在下拉列表 2 中的选择显示的值）： 即如果用户选择 Bajaj， 我应该有“脉冲星”

下拉列表 4（根据用户在下拉列表 3 中的选择显示的值）： 即如果用户选择 Pulsar， 我应该有“350 CC”、“500 CC”

下拉列表 5（根据用户在下拉列表 4 中的选择显示的值）： 即如果用户选择 500 CC， 我应该有“2018模型”，“2021模型”

解决方法

我尽量让它干净

const input = {
    "BIKE LIST": {
        "Bajaj": {
            "Pulsar": {
                "350 CC": [
                    "2019 Model","2020 Model"
                ],"500 CC": [
                    "2018 Model","2021 Model"
                ]
            }
        }
    },"CAR LIST": {
        "Toyota": {
            "Etios": {
                "Liva": [
                    "2019 Model","Regular": [
                    "2018 Model","2021 Model"
                ]
            }
        },}
}

var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var select3 = document.getElementById("select3");
var select4 = document.getElementById("select4");
var select5 = document.getElementById("select5");

function createSelect(params,select_dom) {
    select_dom.innerHTML = "";
    var first_child = null;
    for (const key in params) {
        if (first_child == null) first_child = params[key];
        var option = document.createElement("option");
        if (params.constructor === Array)
            option.text = params[key]
        else
            option.text = key;
        select_dom.add(option);
    }
    return first_child;
}

function initSelect(params,list_dom) {
    var small_input = params;
    for (let index = 0; index < list_dom.length; index++) {
        const element = list_dom[index];
        if (small_input) {
            small_input = createSelect(small_input,element);
        }
    }
}

initSelect(input,[select1,select2,select3,select4,select5])

select1.addEventListener("change",function () {
    initSelect(input[select1.value],[select2,select5])
});
select2.addEventListener("change",function () {
    initSelect(input[select1.value][select2.value],[select3,select5])
});
select3.addEventListener("change",function () {
    initSelect(input[select1.value][select2.value][select3.value],[select4,select5])
});
select4.addEventListener("change",function () {
    initSelect(input[select1.value][select2.value][select3.value][select4.value],[select5])
});

<select id="select1"></select>
<select id="select2"></select>
<select id="select3"></select>
<select id="select4"></select>
<select id="select5"></select>