Question

在我目前的项目中，我有一个提交表单，我想根据表单中的其他输入隐藏部分内容。我想有条件地展示一些这些。如果用户选择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);

我目前的想法是在select字段的change事件上放置一个事件监听器并检查当前值是什么，如果它不是所需值，则隐藏电子邮件字段。

    $("#warningTypeSelect").on("change", () => {
        if ($("#warningTypeSelect").val() === "2") {
            $("#emailDiv").show(); 
        }
        else {
            $("#emailDiv").hide();
        }
    })

但是这个选项让我在电子邮件元素上放置内联样式。有没有更简洁的方法在表单中执行此操作，因为现在我必须将事件处理程序混合到我的元素创建代码中？

Answer 1

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

试试这个

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

1 个答案: