I have been breaking my head with adding the below functionality in UI using HTML5 BOOTSTRAP-CSS-JS.
I am trying to create UI Dropdowns by consuming JSON input.
NOTE: The "JSON keys" are also to be consumed as dropdowns values rather than just the general "JSON values".. hence, i am unable to work out a logic for the same!
I have JSONs in the exact below format:
{
"BIKE LIST": {
"Bajaj": {
"Pulsar": {
"350 CC": [
"2019 Model",
"2020 Model"
],
"500 CC": [
"2018 Model",
"2021 Model"
]
}
}
},
"CAR LIST": {
"Toyota": {
"Etios": {
"Liva": [
"2019 Model",
"2020 Model"
],
"Regular": [
"2018 Model",
"2021 Model"
]
}
},
}
}
I would like to create 5 DYNAMIC dropdowns in UI as follows:
Dropdown 1 values: BIKE LIST, CAR LIST
Dropdown 2 ( values displayed according to user selection in Dropdown 1): i.e. if User selects BIKE LIST, I should have "Bajaj"
Dropdown 3 ( values displayed according to user selection in Dropdown 2): i.e. if User selects Bajaj, I should have "Pulsar"
Dropdown 4 ( values displayed according to user selection in Dropdown 3): i.e. if User selects Pulsar, I should have "350 CC", "500 CC"
Dropdown 5 ( values displayed according to user selection in Dropdown 4): i.e. if User selects 500 CC, I should have "2018 Model", "2021 Model"
I tried to make it clean as possible
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",
"2020 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, select3, select4, select5])
});
select2.addEventListener("change", function () {
initSelect(input[select1.value][select2.value], [select3, select4, 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>