Javascript 如何根据输入有条件地隐藏输入表单的部分？

在我当前的项目中，我有一个提交表单，我想根据表单中的其他输入隐藏其中的部分内容。我只想有条件地展示其中一些。如果用户选择WarningType是通知，我们应该显示表单的输入附件和电子邮件部分。我该怎么做

    // Deviation type
    var selWarningType = $("<select />").css({ width: "96%" });
    selWarningType.append(
        $("<option />").val("1").text(res.Warning),
        $("<option />").val("2").text(res.Notification)
    );
    var textWarningType = $("<b>" + res.WarningOrNotification + ":</b>").css({ display: "block", "margin-top": "10px" });
    formContent.append(textWarningType, selWarningType);

    // Input attachment
    var inputFile: JQuery = $("<input id='attachment-input'type='file' />");
    var attach = $("<b class='attachmentBlock'>"+ res.Attachments +":</b></div>").css({ display: "block", "margin-top": "10px" });
    formContent.append(attach, inputFile);

    // Email list 
    var emailAddress = $("<input />").val("").css({ width: "96%" });
    var textEmail = $("<b>" + res.Email + ":</b>").css({ display: "block", "margin-top": "10px" });

    var emailSubLabel = $("<span>" + res.EmailHelpLabel + "</span>");
    formContent.append(textEmail, emailSubLabel, emailAddress);

但是这个选项让我在email元素上放置内联样式。有没有更干净的方法在表单中实现这一点，因为现在我必须将事件处理程序混合到元素创建代码中

$("#warningTypeSelect").on("change", () => {
       if ($("#warningTypeSelect").val() === "2") {
          $("#emailDiv").css("display","block"); 
       }
       else {
          $("#emailDiv").css("display","none");
       }
  })

试试这个

$("#warningTypeSelect").on("change", () => {
       if ($("#warningTypeSelect").val() === "2") {
          $("#emailDiv").css("display","block"); 
       }
       else {
          $("#emailDiv").css("display","none");
       }
  })