更改选择选项更改的内容 - Javascript答案

【问题标题】：Change content on Select Option change - Javascript更改选择选项更改的内容 - Javascript
【发布时间】：2021-02-24 21:27:06
【问题描述】：

我有一个类用于根据从 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);
        }
    }
}

这是主Form类的方法：

render(modal) {
        this.self.append(this.fullName, this.purpose, this.desc, this.priority, this.status, this.submit);
        modal.append(this.self);
    }

【问题讨论】：

不确定如何为您提供功能性的 sn-p。基本上，您需要添加一个 clear 函数，从 DOM 中清除当前表单，然后附加新表单。其次，为什么要在 if 语句之前更新表单？
tstrand66，我尝试将类添加到每个表单，然后 form.remove() 但它不适用于所有实例。
向 this.self 添加一个名为 'formContainer' 的类。然后在您使用的任何删除函数中 go const el = document.getElementById('formContainer'); el.parentNode.removeChild(el) 将删除它。那么当您在新选项上调用 render 时，它将是单数形式

标签： javascript dom-events javascript-objects

【解决方案1】：

我通过使用表单类创建单独的 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;
        }

【讨论】：