更改 Select 上的內容 選項更改 - Javascript

Question

我有一個 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);
    }

Answer 1

我通過使用 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;
        }