Question

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

下面是我的aspx代码。

＆＃13;

            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;
            }

＆＃13;

<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>

＆＃13;

代码工作正常，当我在下拉列表中选择值时，它会在标签中显示消息。但是，当我在下拉列表中选择一个值时，标签消息仍显示错误且未被关闭。

非常感谢任何帮助。

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>

使用javascript下拉验证

1 个答案: