使用JavaScript進行下拉驗證

Question

我正在做一個驗證，檢查是否使用JavaScript在asp.net下拉按鈕中選擇了Please Please ...以外的值。 我在下拉事件的onchange中觸發驗證功能，並且如果值是“請選擇...”，則在標簽控件中顯示一條消息。

下面是我的aspx代碼。

  document.getElementById("ContentPlaceHolder1_drpEditAlerts").onchange = function validate_Quest() { var edAlertSelect = document.getElementById("ContentPlaceHolder1_drpEditAlerts"); if (edAlertSelect.selectedIndex == 0) { document.getElementById("lblEdtAlert").innerHTML = 'Kindly select an alert!'; document.getElementById('lblEdtAlert').style.color = "red"; document.getElementById("ContentPlaceHolder1_Button3").disabled = true; return false; } document.getElementById("lblEdtAlert ").innerHTML = ''; document.getElementById("ContentPlaceHolder1_Button3").disabled = false; return true; } 

 <p> Select an alert to link this scenario* <span style="float: right"> <asp:Label ID="lblEdtAlert" Text="" ForeColor="Red" Font-Size="Smaller"></asp:Label> </span> <asp:DropDownList ID="drpEditAlerts" runat="server" Height="32px" Width="500px" /> </p> 

代碼工作正常，當我在下拉菜單中選擇值時，它會在標簽中顯示消息。 但是，當我在下拉列表中選擇一個值時，該標簽消息仍顯示錯誤且未關閉。

非常感謝您的幫助。

Answer 1

更簡單

 var select = document.getElementById("ContentPlaceHolder1_drpEditAlerts"); var label = document.getElementById("lblEdtAlert"); var button = document.getElementById("ContentPlaceHolder1_Button3"); window.onload = function() { select.onchange = function() { var ok = this.selectedIndex > 0; label.innerHTML = ok ? "" : 'Kindly select an alert!'; label.style.color = ok ? "black" : "red"; button.disabled = !ok; } } 

 <p> Select an alert to link this scenario* <span> <label id="lblEdtAlert"></label> </span> <select id="ContentPlaceHolder1_drpEditAlerts"> <option>Please Select</option> <option>Other 1</option> <option>Other 2</option> </select> <button id="ContentPlaceHolder1_Button3">send</button> </p>