[英]Change content on Select Option change - Javascript
我有一个 class 用于根据从 Select 中选择的值来选择表格。 我有一个问题,当我选择一个选项时,我看到了所需的形式,但是当我选择另一个选项时,我已经有两个 forms 一个在另一个之下,当我选择第三个选项时,我将所有三个 forms 放在一起。 我需要的是,在更改选项时,forms 也会更改。
这是我的 class select 的代码:
export default class FormSelect {
constructor() {
this.self = document.createElement('div');
this.select = new SelectDoctor(["Cardiologist", "Dentist", "Therapist"], "doctor", "Choose doctor:").create();
}
render(modal) {
this.self.append(this.select);
modal.append(this.self);
this.select.addEventListener("change", () => {
const value = this.select.value;
this.chooseDoctor(value);
});
}
chooseDoctor(value) {
const modal = document.querySelector('.modal-2')
const cardio = new FormCardiologist();
const dentist = new FormDentist();
const therapist = new FormTherapist();
if (value === "Cardiologist") {
cardio.render(modal);
} else if (value === "Dentist") {
dentist.render(modal);
} else if (value === "Therapist") {
therapist.render(modal);
}
}
}
这是主要表格class的方法:
render(modal) {
this.self.append(this.fullName, this.purpose, this.desc, this.priority, this.status, this.submit);
modal.append(this.self);
}
我通过使用 class 为 forms 创建单独的 div 元素来实现它,然后在每次更改时我清除 innerHTML =“”。
switch (value) {
case "Cardiologist":
modal.innerHTML = "";
cardio.render(modal);
break;
case "Dentist":
modal.innerHTML = "";
dentist.render(modal);
break;
case "Therapist":
modal.innerHTML = "";
therapist.render(modal);
break;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.