I have 4 selects and I'm trying to get the device and the phone or watch and model of the device and finally the problem with the device, so every is working untill i choose the device and then the phone but when i try to choose the model of the phone there is no values, I couldn't figure it out, This is my code.
var subjectObject = {
Phone: {
Samsung: {
A50: [
"Screen",
"Screen High Copy",
"Battery",
"Charging Port",
"Speaker",
"Front Camera",
"Back Camera",
"Home Button",
"Loud Speaker",
"IC Brightness",
"IC Charging",
"IC Display",
"IC Touch",
"IC WI-FI",
"IC Baseband",
"Short Circuit",
],
A70: [
"Screen",
"Screen High Copy",
"Battery",
"Charging Port",
"Speaker",
"Front Camera",
"Back Camera",
"Home Button",
"Loud Speaker",
"IC Brightness",
"IC Charging",
"IC Display",
"IC Touch",
"IC WI-FI",
"IC Baseband",
"Short Circuit",
],
},
Watch: {
Apple: {
SmartWatch1: ["Broken Screen"],
},
},
};
window.onload = function () {
var device = document.getElementById("device");
var phone = document.getElementById("phone");
var model = document.getElementById("model");
var problem = document.getElementById("problem");
for (var x in subjectObject) {
device.options[device.options.length] = new Option(x, x);
}
device.onchange = function () {
phone.length = 1;
model.length = 1;
problem.length = 1;
//display correct values
for (var y in subjectObject[this.value]) {
phone.options[phone.options.length] = new Option(y, y);
}
};
phone.onchange = function () {
model.length = 1;
//display correct values
var z = subjectObject[phone.value][this.value];
for (var i = 0; i < z.length; i++) {
model.options[model.options.length] = new Option(z[i], z[i]);
}
};
model.onchange = function () {
problem.length = 1;
//display correct values
var z = subjectObject[model.value][this.value];
for (var i = 0; i < z.length; i++) {
problem.options[problem.options.length] = new Option(z[i], z[i]);
}
};
};