2015-04-27 24 views
0

我正在做一个验证,检查是否在使用javascript的asp.net下拉按钮中选择了Please Select ...以外的值。我在下拉事件的onchange中触发验证函数,如果值为Please Select ...,我在标签控件中显示一条消息。使用javascript的下拉验证

以下是我的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>

的代码工作正常,当我在下拉列表中请其价值向我展示在标签中的信息。但是,当我在下拉列表中选择一个值时,标签消息仍显示错误并且未关闭。

任何帮助,高度赞赏。

+2

请与实际的下拉列表创建的例子,因为你的ASP不使这里下拉 – mplungjan

+1

事情是这样的 - > http://jsfiddle.net/adeneo/ fptx2gaj/1/ – adeneo

+0

嗨,adebeo,谢谢你的代码工作...我修改了一下你的代码,并将其运行。 –

回答

0
简单

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>