如何根據輸入有條件地隱藏部分輸入表單？

在我目前的項目中，我有一個提交表單，我想隱藏基於表單中其他輸入的部分。我只想有條件地展示其中的一些。如果用戶選擇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);

我現在的想法是把上的選擇場的變化事件的事件監聽器，並檢查什麼是當前值，如果是別的東西比需要的值，隱藏電子郵件字段。

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

但是這個選項讓我在電子郵件元素上放置內聯樣式。有沒有一種更清晰的方式來做到這一點，因爲現在我必須將事件處理程序混合到我的元素創建代碼中？

來源

2017-05-22 TeraTon

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

試試這個

來源

2017-05-22 13:04:09 Cool

如何根據輸入有條件地隱藏部分輸入表單？

回答

相關問題